操作属性、操作样式

1. 操作属性

1.1 HTML 属性与 DOM 属性的对应

<div>

  <label for="username">User Name: </label>

  <input type="input" name="username" id="username" class="text" value="">

</div>

var input = document.getElementsByTagName('input')[0];

console.log(input.id); // 'username'

console.log(input.type); // 'text'

console.log(input.className); // 'text'

console.log(document.getElementsByTagName('label')[0].htmlFor); // 'username'

1.2 属性操作方式

1.2.1 Property Accessor

// 读取属性

input.className; // 'text'

input[id]; // 'username'

// 写入属性（可增加新的属性或改写已有属性）。

input.value = 'newValue';

input[id] = 'newId';

1.2.2 getAttribute / setAttribute

// 读取属性（获取到的均为属性的字符串）

var attribtue = element.getAttribute('attributeName');

// 写入属性（可增加新的属性或改写已有属性）

element.setAttribute('attributeName', value);

1.2.3 dataset

自定义属性，其为HTMLElement上的属性也是data-*的属性集。

主要用于在元素上保存数据。获取的均为属性字符串。

<div id='user' data-id='1234' data-username='x' data-email='mail@gmail.com'></div>

var div = document.getElementById('user');

console.log(div.dataset.id); // '1234'

console.log(div.dataset.username); // 'x'

console.log(div.dataset.email); // 'mail@gmail.com'

2. 操作样式

2.1 CSS 对应 DOM 对象

<!DOCTYPE html>

<html>

	<head>

		<link rel="stylesheet" type="text/css" href="sample.css">

		<style>

			body {

				margin: 30px;

			}

		</style>

		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

		<script>

		$(function(){

			var link = document.querySelector('link');

			console.log(link);

			var style = document.querySelector('style');

			console.log(style);

			console.log(document.styleSheets); // 整个页面的全部样式（不包括行内样式）

		});

		</script>

	</head>

	<body>

		<p style="font-size:1rem;">Hello</p>

	</body>

</html>

样式表的位置：

行内样式（比如<p style="font-size:1rem;"></p>）
内部样式表（比如<style>body {margin: 30px;}</style>）
外部样式表（比如<link rel="stylesheet" type="text/css" href="sample.css">）

2.2 内部样式表

<!DOCTYPE html>

<html>

	<head>

		<link rel="stylesheet" type="text/css" href="sample.css">

		<style>

			body {

				margin: 30px;

			}

		</style>

		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

		<script>

		$(function(){

			var style = document.querySelector('style');

			console.log(style.sheet.cssRules); // CSSRuleList {0: CSSStyleRule, length: 1}

			console.log(style.sheet.cssRules[0]);

			// CSSStyleRule {selectorText: "body", style: CSSStyleDeclaration, styleMap: StylePropertyMap, type: 1, cssText: "body { margin: 30px; }", …}

			console.log(style.sheet.cssRules[0].selectorText); // body

			console.log(style.sheet.cssRules[0].style);

			// CSSStyleDeclaration {0: "margin-top", 1: "margin-right", 2: "margin-bottom", 3: "margin-left", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}

			console.log(style.sheet.cssRules[0].style.margin); // 30px

		});

		</script>

	</head>

	<body>

		<p style="font-size:1rem;">Hello</p>

	</body>

</html>

2.3 行内样式

var p = document.getElementsByTagName('p')[0];

console.log(p.style['font-size']); // 1rem

注意：这里不能用p.style.font-size，而只能写成p.style['font-size']。

2.4 更改样式

2.4.1 element.style

<!DOCTYPE html>

<html>

	<head>

		<link rel="stylesheet" type="text/css" href="sample.css">

		<style>

			body {

				margin: 30px;

			}

		</style>

		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

		<script>

		$(function(){

			var p = document.getElementsByTagName('p')[0];

			p.style.color = 'red';

			p.style['padding'] = '5px';

		});

		</script>

	</head>

	<body>

		<p style="font-size:1rem;">Hello</p>

	</body>

</html>

2.4.2 element.style.cssText

使用element.style.cssText一次同时设置多个行内样式。

var p = document.getElementsByTagName('p')[0];

p.style.cssText = 'color:blue;padding:10px';

2.4.3 更改class

.add {

	color:green;

	padding:20px;

}

var p = document.getElementsByTagName('p')[0];

p.className += ' add';

2.4.3 更换样式表

var link = document.querySelector('link');

link.setAttribute('href', 'sample2.css');

2.5 获取样式

2.5.1 element.style

<p style="font-size:1rem;color:blue;">Hello</p>

var p = document.querySelector('p');

console.log(p.style.color); // blue

console.log(p.style['font-size']); // 1rem

注意：这种方式只能获取行内样式表的样式，不能获取内部样式表和外部样式表的样式。

2.5.2 window.getComputedStyle()

<!DOCTYPE html>

<html>

	<head>

		<link rel="stylesheet" type="text/css" href="sample.css">

		<style>

			body {

				margin: 30px;

			}

			p {

				font-size:1rem;

			}

		</style>

		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

		<script>

		$(function(){

			var p = document.querySelector('p');

			console.log(window.getComputedStyle(p).color); // rgb(0, 0, 255)

			console.log(window.getComputedStyle(p)['font-size']); // 16px

			console.log(window.getComputedStyle(p)['background-color']); // rgb(255, 255, 0)

		});

		</script>

	</head>

	<body>

		<p style="color:blue;">Hello</p>

	</body>

</html>

/* sample.css */

p {

	background-color:yellow;

}

注意：这里获取的样式为只读属性不可修改。

参考：

操作属性、操作样式 - DOM编程的更多相关文章

jQuery 选择器筛选器样式操作文本操作属性操作文档处理事件动画效果插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
jQuery-介绍加载选择器样式操作属性操作绑定click事件
jQuery - 介绍加载选择器样式操作属性操作绑定click事件注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作样式 ⑤ 事件点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作样式 ⑤ 事件点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
Dom样式操作-属性操作
1. 对样式进行操作: 1) 以样式(C1,C2等)为最小单位进行修改. className, classList, (以列表形式获得) classList.add("C2"), ...
dom操作属性操作样式操作
jQuery DOM操作 1 插入子元素 append('<img>') 插后面被插入元素调用 appendTo('<img scr="...">') 新 ...
4月12日学习笔记——jQuery操作属性和样式
区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus ...
JQuery操作属性、样式、风格(attr、class、css)
样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...
jQuery-对标签元素文本操作-属性操作-文档的操作
一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...

随机推荐

数据库04 /多表查询、pymysql模块
数据库04 /多表查询.pymysql模块目录数据库04 /多表查询.pymysql模块 1. 笛卡尔积 2. 连表查询 2.1 inner join 内连接 2.2 left join 左连接 ...
机器学习实战基础（二十三）：sklearn中的降维算法PCA和SVD（四） PCA与SVD 之 PCA中的SVD
PCA中的SVD 1 PCA中的SVD哪里来? 细心的小伙伴可能注意到了,svd_solver是奇异值分解器的意思,为什么PCA算法下面会有有关奇异值分解的参数?不是两种算法么?我们之前曾经提到过,P ...
数据可视化之DAX篇（二十四）Power BI应用技巧：在总计行实现条件格式
https://zhuanlan.zhihu.com/p/98975646 如何将表格或者矩阵中值的条件格式也应用于总计行? 目前PowerBI并不支持这种功能,无法在总计行或者小计行上应用条件格式, ...
接口测试框架实战（三）| JSON 请求与响应断言
关注公众号,获取测试开发实战干货合辑.本文节选自霍格沃兹<测试开发实战进阶>课程教学内容. 数据驱动就是通过数据的改变驱动自动化测试的执行,最终引起测试结果的改变.简单来说,就是参数化在自 ...
[C#]正则表达式的基本用法
C#正则表达式的基本用法正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串.将匹配的子串替换或者从某个串中取出符合某个 ...
Websphere修改web.xml不生效的解决办法（转）
在websphere下部署了一个java工程后,如果修改了web.xml文件,重新启动这个java工程发现websphere并没有自动加载web.xml文件,即修改后的web.xml并不起作用,除非重 ...
从Excel（CSV）文件导入数据到Oracle
步骤: 1.准备数据:在excel中构造出需要的数据2.将excel中的数据另存为文本文件(有制表符分隔的)3.将新保存到文本文件中的数据导入到pl*sql中在pl*sql中选择tools--text ...
Web Scraping using Python Scrapy_BS4 - using Scrapy and Python(2)
Scrapy Architecture Creating a Spider. Spiders are classes that you define that Scrapy uses to scrap ...
C++语法小记---标准库
C++标准库 C++标准库包含如下内容: C++标准编译工具链 C++扩展编译工具链(各种C++编译器独有) C++标准库 C++库 C库 C兼容库(为了兼容能够用C编译器编译的项目,直接使用C++也 ...
SQL 更新删除
-- 插入数据 INSERT INTO [ Salary ] VALUES(25451,4545,45 ) INSERT INTO [ Salary ] (编号,收入,支出) VALUES(25451 ...

操作属性、操作样式 - DOM编程