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 ...
随机推荐
- python之sqlite3使用详解
Python SQLITE数据库是一款非常小巧的嵌入式开源数据库软件,也就是说没有独立的维护进程,所有的维护都来自于程序本身.它使用一个文件存储整个数据库,操 作十分方便.它的最大优点是使用方便,功能 ...
- HDU 1002.A + B Problem II-数组模拟-大数相加
A + B Problem II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- vmware漏洞之一——转：利用一个堆溢出漏洞实现VMware虚拟机逃逸
转:https://zhuanlan.zhihu.com/p/27733895?utm_source=tuicool&utm_medium=referral 小结: vmware通过Backd ...
- python的ipython manage.py shell 引发的 No module named _argparse
环境是:Centos6.6 ,python 2.6 今晚,shell 中输入: # ipython manage.py shell 报错,说找不到命令: 我当时,觉得,我有可能没有安装ipython ...
- Master定理学习笔记
前言 \(Master\)定理,又称主定理,用于程序的时间复杂度计算,核心思想是分治,近几年\(Noip\)常考时间复杂度的题目,都需要主定理进行运算. 前置 我们常见的程序时间复杂度有: \(O(n ...
- 洛谷——P1292 倒酒
P1292 倒酒 题目描述 Winy是一家酒吧的老板,他的酒吧提供两种体积的啤酒,a ml和b ml,分别使用容积为a ml和b ml的酒杯来装载. 酒吧的生意并不好.Winy发现酒鬼们都非常穷.有时 ...
- 概率dp学习记录
论文参考 汤可因<浅谈一类数学期望问题的解决方法> 反正是很神奇的东西吧..我脑子不好不是很能想得到. bzoj 1415 1415: [Noi2005]聪聪和可可 Time Limit: ...
- SPOJ Time Limit Exceeded（高维前缀和）
[题目链接] http://www.spoj.com/problems/TLE/en/ [题目大意] 给出n个数字c,求非负整数序列a,满足a<2^m 并且有a[i]&a[i+1]=0, ...
- [CodeForces-759D]Bacterial Melee
题目大意: 有一串n个字母,每个位置的字母可以同化边上的一个字母, 比如:ab可以变成aa或者bb. 相对的两个同化不能同时发生,比如ab不能变成ba. 现在给你一个字符串,问你经过任意次数的同化过程 ...
- mongo基础---增删改查
正文 MongoDB 是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB是一个介于关系型数据库和非关系数据库之间的产品,是非关系数据 ...