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 ...
随机推荐
- 嵌套循环连接(Nested Loops Joins)
The nested loops join, also called nested iteration, uses one join input as the outer input table(sh ...
- Spring 异常
Java Web项目整体异常处理机制 http://www.51testing.com/html/90/n-823590.html spring mvc 异常统一处理方式 http://www.c ...
- 【UOJ #179】线性规划 单纯形模板
http://uoj.ac/problem/179 终于写出来了单纯性算法的板子,抄的网上大爷的qwq 辅助线性规划找非基变量时要加个随机化才能A,我也不知道为什么,卡精度吗? 2017-3-6UPD ...
- 【UOJ #279】【UTR #2】题目交流通道
http://uoj.ac/problem/279 先判断答案为0的情况,\(d(i,i)\neq 0\),\(d(i,j)\neq d(j,i)\),\(d(i,j)>d(i,k)+d(k,j ...
- json，xml，html三种数据格式
json.xml.html xml解析如下: 1.DOM:基于XML文档树结构的解析 解析器读入整个文档,然后构建一个驻留内存的树结构,然后代码就可以使用 DOM 接口来操作这个树结构.优点:整个文档 ...
- Promise对象的基本用法
主要作用 1.用来传递异步操作的消息 2.三种状态:pending.Resolved.Rejected,而且只能从第一种状态转到后两者状态之一. 3.缺点 (1)一旦新建就会立即执行 (2)如果不设置 ...
- 最简单的flask表单登录
from flask import Flask from flask import request app = Flask(__name__) @app.route('/', methods=['GE ...
- Web安全开发指南--会话管理
1.会话管理 3.1.会话管理安全规则 1 避免在URL携带session id. 2 使用SSL加密通道来传输cookie. 3 避免在错误信息和调试日志中记录session id. 4 使用框架自 ...
- dns问题，QQ打得开，网页打不开
dns问题,QQ打得开,网页打不开 ip4 dns 改为114.114.114.114. 原因有可能是路由出错之类的.114是默认的通用ip
- 【java】java中替换中括号[ ]操作
String aa ="[1,2,3]"; aa = aa.replaceAll("[\\[\\]]",""); 结果为 1,2,3