您的位置：首页 > Web前端 > CSS

DOM-元素的属性，样式

2016-03-01 23:44 549 查看

属性集合：包含当前元素的所有属性

如何获取属性集合：

属性：attributes

使用方式：DOM对象 attributes

返回：NamedNodeMap类型的结果

1、读取属性值

1、element.attributes[下标].value

2、element.attributes["属性名"].value

3、element.getAttributeNode("属性名").value

4、element.getAttribute("属性名");

2、修改属性值

1、element.setAttribute("属性名称","值");

2、element.setAttributeNode(attrNode);

3、元素.属性名 = 值;

var value = 元素.属性名;

a.id = "testA"; // 将 a 对象的 id属性值修改为 testA

元素样式

1、CSS 定义方式

1、内联样式

2、内部样式表

3、外部样式表

2、元素样式

1、操作元素的行内样式

js中最常用的操作是访问元素的内联样式

属性:style

返回：CSSStyleDeclaration 类型的对象

该对象中，包含当前元素定义好的所有内联样式

可以通过样式属性名称获取或修改当前元素的内联样式

属性名：将css属性名称中，去掉横线变成驼峰命名法

CSS: javascript

width width

background-color backgroundColor

border-bottom-color borderBottomColor

获取样式：element.style.属性名; -->返回的所有数据都是string类型，如果有单位的话，也会将单位一起返回

设置样式：element.style.属性名 = value ; 设置的值也是字符串，如果带单位的话，需要将单位一同设置

element.style.width="500px";

2、获取计算的样式

计算的样式：内部样式表，外部样式表中的属性值，是经过计算的。

计算的样式：

DOM：

document.defaultView.getComputedStyle(dom元素).属性名;

IE：

元素对象.currentStyle.属性;

注意：以上方式，只能获取相应的属性值，是不能修改的。

3、修改样式表中的样式

1、先获取样式表对象

var sheet = document.styleSheets[i];

2、获取样式表中所有的样式规则

var rules = sheet.cssRules;

或者

var rules = sheet.rules;

3、获取规则集合中，包含要修改属性的规则

var rule = rules[下标];

4、获取或设置规则中的属性值

rule.style.属性名=值;

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<script>
function getAttr(){
var a = document.getElementById("a");
var attrs = a.attributes;
console.log("共有"+attrs.length+"个属性");
console.log(attrs[0].value);
console.log(attrs["href"].value);
console.log("href:"+a.getAttributeNode("href").value);
console.log("href:"+a.getAttribute("href"));
}

function setAttr(){
var a = document.getElementById("a");
// 设置 a 的 href 属性值 为 csdn.net
a.setAttribute("href","http://www.csdn.net");
}
</script>

</head>

<body>
<a id="a" href="http://www.baidu.com">百度</a>
<button onclick="getAttr()">获取属性</button>
<button onclick="setAttr()">修改属性</button>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航