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 ...
随机推荐
- 【转载】文件下载FileDownloader
原文地址:https://github.com/lingochamp/FileDownloader 特点 简单易用 高并发 灵活 可选择性支持: 独立/非独立进程 自动断点续传 需要注意 当下载的文件 ...
- 洛谷P4145 上帝造题的七分钟2/花神游历各国 [树状数组，并查集]
题目传送门 题目背景 XLk觉得<上帝造题的七分钟>不太过瘾,于是有了第二部. 题目描述 "第一分钟,X说,要有数列,于是便给定了一个正整数数列. 第二分钟,L说,要能修改,于是 ...
- Shiro的认证原理（Subject#login的背后故事）
登录操作一般都是我们触发的: Subject subject = SecurityUtils.getSubject(); AuthenticationToken authenticationToken ...
- Luogu P3391 【模板】文艺平衡树（FHQ-Treap）
题意 给出一个长为$n$序列$[1,2,...,n]$,$m$次操作,每次指定一段区间$[l,r]$,将这段区间翻转,求最终序列 题解 虽然标题是$Splay$,但是我要用$FHQ\ Treap$,考 ...
- CSS页面排版的一点笔记
CSS页面排版 字体族 字体族的值是一个字体备选列表,多个字体使用英文逗号隔开,字体名称如果有空格则需要引号. font-family: "Georgia Pro", " ...
- java中ThreadLocal类的使用
ThreadLocal是解决线程安全问题一个很好的思路,ThreadLocal类中有一个Map,用于存储每一个线程的变量副本,Map中元素的键为线程对象,而值对应线程的变量副本,由于Key值不可重复, ...
- BZOJ 1257 [CQOI2007]余数之和sum（分块）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1257 [题目大意] 给出正整数n和k,计算j(n,k)=k mod 1 + k mod ...
- [CF985G]Team Players
题意:给出一个图,求$\sum\limits_{\substack{i\lt j\lt k\\\nexists(i,j),(j,k),(i,k)}}Ai+Bj+Ck$ 挺好的一道题==,就是稍微毒了点 ...
- (疯狂java)第二课
(本文章只是为了好玩,没有别的意思,有理解错误之处,恳请提醒,谢谢) 三.数据类型和运算符 想了一下今天看的内容好像依然大脑停留在用C语言去理解java,感觉有点奇怪,为啥本章叫数据类型和运算符,上来 ...
- Mobiscroll手机触屏日期选择器
最近在制作jquery mobile因要用到日历控件,突然发现Mobiscroll非常不错.于是摘下来记录. A Mobiscroll是一个用于触摸设备(Android phones.iPhon ...