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 ...
随机推荐
- summernote图片上传功能保存到服务器指定文件夹+php代码+java方法
1.summernote富文本编辑器 summernote是一款基于bootstrap的富文本编辑器,是一款十分好用的文本编辑器,还附带有图片和文件上传功能. 那么在我们网站中想吧这个图片上传到服务器 ...
- Java网络编程一
1.InetAddress的应用 import java.util.List; import java.math.BigDecimal; import java.net.InetAddress; im ...
- ECNU 2018 10月月赛 E 盖房子 （bitset + 倍增）
题目链接 ECNU Monthly 2018.10 Problem E 从开场写到结束…… 显然要把三角形分成上下两部分. 把每一部分分成三部分,以上部分为例. 上面和右边,以及左下角的正方形. 也 ...
- Flask实战第45天：完成前台登录界面
我们的注册页面和登录页面有很多相似之处,因此,也可以基于一个模板来实现. 首先创建一个模板html,命名为front_signbase.html, 然后修改注册页面front_signup.html, ...
- CCF 第六次计算机职业认证 第四题 收货 stl动态存储和fleury算法的综合应用
问题描述 为了增加公司收入,F公司新开设了物流业务.由于F公司在业界的良好口碑,物流业务一开通即受到了消费者的欢迎,物流业务马上遍及了城市的每条街道.然而,F公司现在只安排了小明一个人负责所有街道的服 ...
- 某5道CF水题
1.PolandBall and Hypothesis 题面在这里! 大意就是让你找一个m使得n*m+1是一个合数. 首先对于1和2可以特判,是1输出3,是2输出4. 然后对于其他所有的n,我们都可以 ...
- 计算gcd Exercise07_14
import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:计算gcd * */ public class Exercise07_14 ...
- Problem F: 逆序排列
#include<stdio.h> void sort(int *p,int n) { int i,t; ;i<n/;i++) { t=*(p+i); *(p+i)=*(p+n-i- ...
- ORACLE常用性能监控SQL【一】
目录(?)[+] 系列 ORACLE常用性能监控SQL[一] ORACLE常用性能监控SQL[二] Oracle-动态性能视图解读 系列 死锁后的解决办法 生成Kill Session语句 查看导致死 ...
- Linux上安装使用SSH(ubuntu&&redhat)
转自:http://blog.csdn.net/zxs9999/article/details/6930736 Ubuntu安装使用SSH ubuntu默认并没有安装ssh服务,如果通过ssh链接ub ...