操作属性、操作样式

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 ...

随机推荐

数据可视化之powerBI技巧（六）在PowerBI中简单的操作，实现复杂的预测分析
时间序列预测就是利用过去一段时间内的数据来预测未来一段时间内该数据的走势,比如根据过去5年的销售数据进行来年的收入增长预测,根据上个季度的股票走势推测未来一周的股价变化等等. 对于大部分人来说,这是个 ...
网课神器之obs-studio的安装使用
obs-studio 首先,下载obs-studio安装文件,然后点击安装. 建议安装完后直接跳过配置,然后进入文件-设置-通用-系统托盘-勾选"总是最小化到系统托盘,而不是任务栏" ...
jupyter中%matplotlib inline报错
学习matplotlib时,使用的jupyter跑代码.报错如上图.大致就是后面的注释不能被识别.我寻思着注释不用识别吧,大概是因为%后跟的语句被全部当成命令行执行了,然后命令行不识别行内注释,导致报 ...
Thymeleaf从入门到精通
什么是Thymeleaf 大家好,我是bigsai,今天我们来学习Thymeleaf,如果你对Thymeleaf比较陌生也不要紧,它很容易学习与理解,并有着自己鲜明的特色. 开始之前,我们依旧问一个问 ...
Zabbix3.2安装
一.环境 OS: CentOS7.0.1406 Zabbix版本: Zabbix-3.2 下载地址: http://repo.zabbix.com/zabbix/3.2/rhel/7/x86_64/z ...
hcharts生成图表
借助hcharts插件,可以很方便地在模板页面中生成图表.类似插件还有echarts. 补充...
为PhpStorm添加Laravel 代码智能提示功能
php artisan clear-compiled //清除bootstrap/compiled.php php artisan ide-helper:generate //为 Facades 生成 ...
jmeter调试元件Debug Sampler的使用
@@@@@@@@@@@@@@@ 活在当下今天记录一下jmeter调试工具Debug Sampler的心得,调试对于计算机从业人员来说是家常便饭,jmeter虽然代码不多,但是也需要调试,那么如何进行 ...
leetcode 5473
这个题真是当时想麻烦了,,,感谢LLdl 提供的题解其实一个很重要的点就是,如果后面的玩意翻转了偶数次,那就跟没变一样．如果是奇数次就取反．怪我天真,第一反应就去位运算去了,,,,哪有那么复杂诶 ...
layer弹窗插件留言提交
function msgShow(getname,getuserid){ layer.open({ type: 1 //此处以iframe举例 ,title: '收件人:'+getname+'(ID: ...

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