JavaScript Style对象(Style Object)

Style对象代表了HTML文档中的style元素

如何访问Style对象?

从文档的头部能够访问Style对象,或者从指定的HTML元素也可以访问Style对象。

从文档的头部访问时,使用getElementsByTagName访问style元素。

var  x = document.getElementsByTagName("style");

根据指定的元素访问时,使用getElementById访问特定元素的style属性。

var  x = document.getElementById("myH1").style;

如何创建Style对象?

使用createElement()方法创建style元素。

var x = document.createElement("style");

也可以给现存的元素添加style属性:

document.getElementById("myH1").style.color="red"";

标准属性及事件

Style对象同时支持标准的属性事件

Style对象的属性

Style对象的属性
属性 说明 CSS版本
alignContent 设置或返回弹性容器内各项目在竖轴上的对齐方式 3
alignItems 设置或返回弹性容器内各项目排列所依据的基准位置 3
alignSelf 设置或返回弹性容器内被指定项目排列所依据的基准位置 3
animation 除了animationPlayState属性以外的所有其他animation属性的快捷属性 3
animationDelay 设置或返回开始播放动画的时间 3
animationDirection 设置或返回动漫播放的方向 3
animationDuration 设置或返回动漫完成一次播放的时间 3
animationFillMode 设置或返回动画不运行时的状态。 3
animationIterationCount 设置或返回动画运行的次数 3
animationName 设置或返回@keyframes 动画的名称 3
animationTimingFunction 设置或返回动画的速度曲线 3
animationPlayState 设置或返回动画是运行还是暂停 3
background 设置或返回background属性 1
backgroundAttachment 设置或返回背景图像是固定还是滚动 1
backgroundColor 设置或返回一个元素的背景颜色 1
backgroundImage 设置或返回一个元素的背景图像 1
backgroundPosition 设置或返回背景图像的开始位置 1
backgroundRepeat 设置或返回如何重复背景图像 1
backgroundClip 设置或返回绘画领域 3
backgroundOrigin 设置或返回背景图像的定位区域 3
backgroundSize 设置或返回背景图像的尺寸 3
backfaceVisibility 设置或返回当元素不面向屏幕时,元素是否可见 3
border 综合设置或返回边线的宽度、样式、颜色 1
borderBottom 设置或返回下边线的宽度、样式、颜色 1
borderBottomColor 设置或返回下边线的颜色 1
borderBottomLeftRadius 设置或返回左下角边框的形状 3
borderBottomRightRadius 设置或返回右下角边框的形状 1
borderCollapse 设置或返回表格边线是分离还是合为一条单线 2
borderColor 设置或返回表格边线的颜色 1
borderImage 总体指定边线图像 3
borderImageOutset 总体指定边线图像 3
borderImageSlice 设置或返回边框图像的使用范围 3
borderImageSource 设置或返回边框图像的URL 3
borderImageWidth 设置或返回边框上能够使用图像的宽度 3
borderLeft 设置或返回左边线的3个属性值 1
borderLeftColor 设置或返回左边线的颜色 1
borderLeftStyle 设置或返回左边线的样式 1
borderLeftWidth 设置或返回左边线的宽度 1
borderRadius 设置或返回边框圆角 3
borderRight 设置或返回右边线的3个属性值 1
borderRightColor 设置或返回右边线的颜色 1
borderRightStyle 设置或返回右边线的样式 1
borderRightWidth 设置或返回右边线的宽度 1
borderSpacing 设置或返回表格单元格边框间的距离 2
borderStyle 设置或返回边线的样式 1
borderTop 综合设置或返回上边线的3个属性值 1
borderTopColor 设置或返回上边线的颜色 1
borderTopRightRadius 设置或返回右上角边框的形状 1
borderTopStyle 设置或返回上边框的样式 1
borderTopWidth 设置或返回左上角边框的宽度 1
borderWidth 设置或返回表格边线的宽度 1
bottom 设置或返回下基准具体位置 2
boxDecorationBreak 设置或返回元素的背景和边框在遇到分页符时的显示形式,或者直列元素的断行方式 3
boxShadow 设置或返回box阴影 3
boxSizing 设置或返回box阴影 3
captionSide 设置或返回表格标题的位置 2
clear 设置或返回清除浮动 1
clip 设置或返回矩形切割的范围 2
color 设置或返回文字的颜色 1
clip 设置或返回矩形切割的范围 2
columnCount 设置或返回元素里分栏的数目 3
columnFill 设置或返回栏的高度(宽度)是否一致 3
columnGap 设置或返回栏间隔宽度 3
columnRule 设置或返回栏分界线的宽度、样式和颜色 3
columnRuleStyle 设置或返回栏分界线的样式 3
columnRuleWidth 设置或返回栏分界线的宽度 3
columns 设置或返回分栏和栏的宽度 3
columnSpan 设置或返回元素横跨的栏数 3
columnWidth 设置或返回栏的宽度 3
content 使用带有:before和:after的伪类选择器插入生成的内容 2
counterIncrement 设置元素的排列序号 2
counterReset 设置或重置排列序号的初始化 2
cursor 设置或返回光标显示的形状 2
direction 设置或返回元素内容的方向 2
display 设置或返回弹性容器 1
emptyCells 设置或返回空白单元格的表示形式 2
filter 设置或返回元素的视觉效果 3
flex 设置或返回项目的长度 3
justifyContent 设置或返回弹性容器内各项目在水平轴上的对齐方式 1

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

color: red;

}

</style>

</head>

<body>

<p>点击以下按钮,返回文档中的style属性的值</p>

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<script>

function myFc() {

var x = document.getElementsByTagName("STYLE")[0];

document.getElementById("demo").innerHTML = x.innerHTML;

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h1 id="myH1" style="color:red">标题</h1>

<p>点击以下按钮,获取H1元素的style属性的值</p>

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<script>

function myFc() {

var x = document.getElementById("myH1").style.color;

document.getElementById("demo").innerHTML = x;

}

</script>

</body>

</html>

使用例3

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<p>点击以下按钮,创建一个STYLE元素,并把它放到头部</p>

<button onclick="myFc()">按钮</button>

<p>创建的style元素能够改变该当文档中字体的大小</p>

<script>

function myFc() {

var x = document.createElement("STYLE");

var t = document.createTextNode("body {font: 20px verdana;}");

x.appendChild(t);

document.head.appendChild(x);

}

</script>

</body>

</html>

使用例4

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h1 id="myH1">如何改变指定元素的style属性的值</h1>

<p>点击以下按钮,改变H1元素的样式</p>

<button onclick="myFc()">按钮</button>

<script>

function myFc() {

document.getElementById("myH1").style.color = "red";

}

</script>

</body>

</html>

关联内容