Style对象之一
<html>
<style type="text/css">
body{
background-color="#FFCC80";
background-image:url(0387.jpg);
background-repeat:no-repeat;
}
p{
color:white;
}
div{
border:thin solid green;
width:100px;
height:100px;
}
</style>
<input type="button" onclick="setStyle()" value="变化">
<input type="button" onclick="changeAttachment()" value="图片不动，文字滚动" />
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<input type="button" onclick="bgStyle()" value="设置背景颜色">
<input type="button" onclick="imgStyle()" value="添加背景图片">
<input type="button" onclick="changePosition()" value="改变背景图片的位置" />
<input type="button" onclick="changerepeat()" value="改变背景图片平铺状态" />
<span id="span1">This is a paragraph</span>
<input type="button" onclick="changeBorder()" value="设置边框" />
<input type="button" onclick="changeMargin()" value="设置外边距" />
<input type="button" onclick="changeOutline()" value="设置轮廓属性" />
<input type="button" onclick="changePadding()" value="设置内边距" />
<input type="button" onclick="changedisplay()" value="设置元素是否显示" />
<input type="button" onclick="changeHeight()" value="设置元素的高" />
<input type="button" onclick="changeWidth()" value="设置元素的宽" />
<div id="div1">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<input type="button" onclick="hideOverflow()" value="处理不符合元素框的内容" />
<table border="1" height="100px">
<tr>
<td id="td1">
Some example text
</td>
</tr>
</table>
<input type="button" onclick="alignText()" value="设置内容在元素框中的垂直对齐方式" />
<input type="button" onclick="changeVisibility()" value="设置元素是否可见" />
<script>
//Style 对象
//Background 属性
//background 属性在一个声明中设置所有的背景属性
/*function setStyle(){
document.body.style.background="#FFCC80 url(0387.jpg) no-repeat";
}
//backgroundAttachment 属性设置背景图像是否固定或者随着页面的其余部分滚动
//实现了图片不动，文字滚动
//scroll 图片和文字一起滚动
//fixed 图片不动，文字滚动
function changeAttachment(){
document.body.style.backgroundAttachment="fixed";
}
//backgroundColor 属性设置元素的背景颜色
function bgStyle(){
document.body.style.backgroundColor = "#FFCC80";
}
//backgroundImage 属性设置元素的背景图像
function imgStyle(){
document.body.style.backgroundImage = "url(./0387.jpg)"
}
//backgroundPosition 属性设置背景图像的位置
//backgroundPositionX 属性设置背景图像左右的位置
//backgroundPositionX 属性设置背景图像上下的位置
//top left 上 左
//top center 上 左右居中
//top right 上 右
//center left 上下居中 左
//center center 上下居中 左右居中
//center right 上下居中 右
//bottom left 下 左
//bottom center 下 左右居中
//bottom right 下 右
//如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
function changePosition(){
document.body.style.backgroundPosition="center center";
}
//backgroundRepeat 属性设置背景图像是否及如何重复。
//repeat 默认。背景图像将在垂直方向和水平方向重复。
//repeat-x 背景图像将在水平方向重复。
//repeat-y 背景图像将在垂直方向重复。
//no-repeat 背景图像将仅显示一次。
function changerepeat(){
document.body.style.backgroundRepeat="repeat-x";
}
//Border 和 Margin 属性
//border 属性在一个声明中设置所有边框属性
//第一个参数是设置边框的宽度
//第二个参数是设置边框的样式
//第三个参数是设置边框的颜色
function changeBorder(){
document.getElementById("span1").style.border="1px solid #0000FF";
}
//borderWidth 边框的宽度
//borderStyle 边框的样式
//borderColor 边框的颜色
//borderTop 设置上边框
//borderTopWidth 上边框的宽度
//borderTopStyle 上边框的样式
//borderTopColor 上边框的颜色
//borderBottom 设置下边框
//borderBottomWidth 下边框的宽度
//borderBottomStyle 下边框的样式
//borderBottomColor 下边框的颜色
//borderLeft 设置左边框
//borderLeftWidth 左边框的宽度
//borderLeftStyle 左边框的样式
//borderLeftColor 左边框的颜色
//borderRight 设置右边框
//borderRightWidth 右边框的宽度
//borderRightStyle 右边框的样式
//borderRightColor 右边框的颜色
//margin 属性设置元素的外边距
//如果规定一个值，比如 div {margin: 50px} - 所有的外边距都是 50 px
//如果规定两个值，比如 div {margin: 50px 10px} - 上下外边距是 50px，左右外边距是 10 px。
//如果规定三个值，比如 div {margin: 50px 10px 20px}- 上外边距是 50 px，而左右外边距是 10 px，下外边距是 20 px。
//2013/8/14如果规定四个值，比如 div {margin: 50px 10px 20px 30px} - 上外边距是 50 px，右外边距是 10 px，下外边距是 20 px，左外边距是 30 px。
function changeMargin(){
document.getElementById("span1").style.margin="100px";
}
//marginTop 设置元素的上边距
//marginBottom 设置元素的下边距
//marginLeft 设置元素的左边距
//marginRight 设置元素的右边距
//outline 属性在一个声明中设置所有轮廓属性
function changeOutline(){
document.getElementById("span1").style.outline="5px dotted #0000FF";
}
//outlineColor //设置围绕元素的轮廓颜色
//outlineStyle //设置围绕元素的轮廓样式
//outlineWidth //设置围绕元素的轮廓宽度
//padding 属性设置元素的内边距
function changePadding(){
document.getElementById("span1").style.padding="5px";
}
//paddingTop //设置元素的上填充
//paddingBottom //设置元素的下填充
//paddingLeft //设置元素的左填充
//paddingRight //设置元素的右填充
//Layout 属性
//display属性设置元素如何显示
//none 此元素不会被显示。
//block 此元素将显示为块级元素，此元素前后会带有换行符。
//inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
//list-item 此元素会作为列表显示。
//run-in 此元素会根据上下文作为块级元素或内联元素显示。
//compact 此元素会根据上下文作为块级元素或内联元素显示。
//marker
//table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
//inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
//table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
//table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
//table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
//table-row 此元素会作为一个表格行显示（类似 <tr>）。
//table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
//table-column 此元素会作为一个单元格列显示（类似 <col>）
//table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
//table-caption 此元素会作为一个表格标题显示（类似 <caption>）
function changedisplay(){
document.getElementById("span1").style.display="none";
}
//height 属性设置元素的高度
function changeHeight(){
document.getElementById("span1").style.height="100px";
}
//height 属性设置元素的高度
function changeWidth(){
document.getElementById("span1").style.width="100px";
}
//maxHeight 设置元素的最大高度
//maxWidth 设置元素的最大宽度
//minHeight 设置元素的最小高度
//minWidth 设置元素的最小宽度
//overflow 属性规定如何处理不符合元素框的内容
//visible 内容不会被修剪，会呈现在元素框之外。
//hidden 内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
//scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
//auto 由浏览器决定如何显示。如果需要，则显示滚动条。
function hideOverflow(){
document.getElementById("div1").style.overflow="hidden";
}
//verticalAlign 属性设置内容在元素框中的垂直对齐方式
//baseline 默认。元素放置在父元素的基线上。
//sub 垂直对齐文本的下标。
//super 垂直对齐文本的上标
//top 把元素的顶端与行中最高元素的顶端对齐
//text-top 把元素的顶端与父元素字体的顶端对齐
//middle 把此元素放置在父元素的中部。
//bottom 把元素的顶端与行中最低的元素的顶端对齐。
//text-bottom 把元素的底端与父元素字体的底端对齐。
//length
//% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
function alignText(){
document.getElementById("td1").style.verticalAlign="top";
}
//visibility 属性设置元素是否可见
//visible 默认。元素框是可见的。
//hidden 元素框不可见，但仍然影响布局。
function changeVisibility(){
document.getElementById("span1").style.visibility="hidden";
}
*/
</script>
</html>
Style对象之一的更多相关文章
- Javascript 笔记与总结（2-9）获取运行时的 style 对象
获取内存中(正在渲染)的 style 的值(非内联 style,obj.style 只能获得内联 style 的值),可以用 obj.currentStyle(低版本 IE 和 Opera 支持)和 ...
- 常见Style 对象属性值
Style对象的主要需要关注的属性分为4类,下面分别介绍下: Background 属性 backgroundColor 属性设置元素的背景颜色 Object.style.backgroundColo ...
- 外部样式表声明的样式并不会进入style对象
在网页设计当中,我们注重网页的行为(js).结构(HTLM).样式(css)分离开 内联样式表或者内部样式表声明的样式信息都会进入style对象. 我们可以测试一下: 但是我们的外部样式表,也就是通过 ...
- 原生JavaScript HTML DOM Style 对象参考
Style 对象属性 可以在Style对象上使用以下属性: “CSS”列指示定义属性的CSS版本(CSS1,CSS2或CSS3). 属性 描述 CSS alignContent 当项目不使用所有可用空 ...
- 浏览器端-W3School-HTML：HTML DOM Style 对象
ylbtech-浏览器端-W3School-HTML:HTML DOM Style 对象 1.返回顶部 1. HTML DOM Style 对象 Style 对象 Style 对象代表一个单独的样式声 ...
- js中，object可以调用style对象，[]不可以调用style对象
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" Content=&q ...
- style对象的cssText方法
cssText 本质是什么? cssText 的本质就是设置 HTML 元素的 style 属性值. cssText 怎么用? domElement.style.cssText = "col ...
- vue 绑定class、v-bind:style(对象语法、数组语法)
绑定 HTML Class 我们可以传给 v-bind:class 一个对象,以动态地切换 class: 内联样式在模板里 <div id="div1" :class=&qu ...
- javascript之Style对象
Background 属性 属性 描述 background 在一行中设置所有的背景属性 ba ...
随机推荐
- [lampp] 不能通过互联网连接数据库 MySQL is not accessable via network
LAMPP安装目录下的/etc/my.cnf文件注释掉skip-networking #skip-networking#skip-networking
- 剑指offer-二叉查找树的第 K 个结点
/** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; * Tre ...
- 安装 SQL Server 2008 和管理工具 SQL Server 2008 management studio 及相关问题解决
Sql Server 2008 问题小总结 http://www.lihengyu.com/blog/4877.html 安装 SQL Server 2008 和管理工具 SQL Server 200 ...
- Loj10222 佳佳的Fibonacci（矩阵乘法）
题面 给定\(n,m\),求: \[ T(n)=\sum_{i=1}^ni\times f_i \] 其中\(f_i\)为斐波那契数列的第\(i\)项 题解 不妨设: \[ S(n)=\sum_{i= ...
- 洛谷——P1165 日志分析
P1165 日志分析 题目描述 M 海运公司最近要对旗下仓库的货物进出情况进行统计.目前他们所拥有的唯一记录就是一个记录集装箱进出情况的日志.该日志记录了两类操作:第一类操作为集装箱入库操作,以及该次 ...
- poj 2773欧几里德
Happy 2006 Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 5957 Accepted: 1833 Descri ...
- android 内存分哪些区
韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com android 内存分哪些区 内存分哪些区 ============ 内存分为的5大区 1.栈区 ...
- 【转】python assert用法
1.assert语句用来声明某个条件是真的.2.如果你非常确信某个你使用的列表中至少有一个元素,而你想要检验这一点,并且在它非真的时候引发一个错误,那么assert语句是应用在这种情形下的理想语句.3 ...
- AC自动机及KMP练习
好久都没敲过KMP和AC自动机了.以前只会敲个kuangbin牌板子套题.现在重新写了自己的板子加深了印象.并且刷了一些题来增加自己的理解. KMP网上教程很多,但我的建议还是先看AC自动机(Trie ...
- 【Trie模板】HDU1251-统计难题
[题意] n统计出以某个字符串为前缀的单词数量(单词本身也是自己的前缀). [思路] 裸题,不过G++好像会超内存,C++就不会. #include<iostream> #include& ...