您的位置:首页> 前端教程> CSS操作

setProperty()方法

2018-9-26 13:16| 作者: admin| 查看: 3729| 评论: 0|来自: 蚂蚁部落

setProperty是set(设置)和property(属性)的合成词。

可以猜想此方法的作用是用来设置属性值。

既然用来操作CSS,那此方法的作用自然是用来设置指定CSS属性的值。

语法结构:

[JavaScript] 纯文本查看 复制代码
CSSStyleDeclaration.setProperty(propertyName, value, priority)

参数解析:

(1).CSSStyleDeclaration:此对象表示CSS规则的主体部分,也就是大括号内的部分。

(2).propertyName:必需,要设置值的CSS属性名称。

(3).value:可选,设置CSS属性的值,默认为空字符串。

(4).priority:可选,设置CSS的优先级,固定值为"!important"。

首先解释一下什么是规则,看一段代码:

[CSS] 纯文本查看 复制代码
div{
  width:10px;
  height:100px;
  float:left;
}

上面整体就是一个CSS规则,不要误认为规则中的某一条CSS属性的设置是一条规则。

CSSStyleDeclaration对象可以参阅CSSStyleDeclaration对象一章节。

浏览器支持:

(1).IE浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).火狐浏览器支持此方法。

(5).opera浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#ant {
  width:100px;
  height:100px;
  line-height:100px;
  text-align:center;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.style.setProperty("background-color", "red");
  odiv.style.setProperty("color", "green", "important");
}
</script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/26/131850yr6yrrd9jkpnrrfu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过setProperty方法可以将div元素的背景色设置为红色,字体颜色设置为绿色,并设置它的优先级。

关于important可以参阅CSS !important一章节。

代码分析如下:

(1).通过document.getElementById("ant")获取id属性值为"ant"的div元素对象。

(2).odiv.style返回一个CSSStyleDeclaration类型对象。

(3).CSSStyleDeclaration类型对象可以通过setProperty方法设置对应的CSS属性值。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#ant {
  width:100px;
  height:100px;
  line-height:100px;
  text-align:center;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.style.setProperty("background-color", "red");
  odiv.style.setProperty("border", "2px solid blue");
}
</script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
</body>
</html>

谷歌开发者工具截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/26/132406a0j55xzl0w5cx63b.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码通过setProperty方法为div元素设置了背景颜色和边框。

需要注意的是,对于border类似的复合属性,没必要分别设置,直接将复合属性值作为第二个参数即可。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部