操作属性、操作样式

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

随机推荐

数据可视化之图表篇（四）那些精美的Power BI可视化图表
之前使用自定义图表,每次新打开一个新文件时,都需要重新添加,无法保存,在PowerBI 6月更新中,这个功能得到了很大改善,可以将自定义的图表固定在内置图表面板上了. 添加自定义图表后,右键>固 ...
python 装饰器（二）：装饰器基础（二）变量作用域规则，闭包，nonlocal声明
变量作用域规则在示例 7-4 中,我们定义并测试了一个函数,它读取两个变量的值:一个是局部变量 a,是函数的参数:另一个是变量 b,这个函数没有定义它. >>> def f1(a) ...
Java并发编程实践
最近阅读了<Java并发编程实践>这本书,总结了一下几个相关的知识点. 线程安全当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些线程将如何交替执行,并且在主调代码中不需要任 ...
vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装
相信大家在做前后端数据交互的时候都会给请求做一些简单的封装就像之前封装ajax方法一样axios的封装也是一样的简单下面这个就是封装的axios的方法,require.js import axios ...
bzoj3196Tyvj1730二逼平衡树
bzoj3196Tyvj1730二逼平衡树题意: 维护一个数列,操作:查询k在区间内的排名.查询区间内排名为k的值3.修改某一位上的数值.查询k在区间内的前驱(前驱定义为小于x,且最大的数).查询k ...
题解 CF296B 【Yaroslav and Two Strings】
题目传送门题目大意如果两个只包含数字且长度为 \(n\) 的字符串 \(s\) 和 \(w\) 存在两个数字 \(1≤i,j≤n\),使得 \(s_i<w_i,s_j>w_j\) , ...
[jvm] -- 判断对象是否死亡篇
判断对象是否死亡的两种方法引用计数法给对象中添加一个引用计数器,每当有一个地方引用它,计数器就加 1:当引用失效,计数器就减 1:任何时候计数器为 0 的对象就是不可能再被使用的. 优点: 简单 ...
vue使用select间相互绑定
让这两个select相互绑定,让roleOptions选取值后,worklist弹出得是roleOptions值 <el-select v-model="postForm.projec ...
OKex平台如何使用谷歌身份验证？
打开OK交易所官网,找到谷歌身份验证器的开启界面登陆后点击右上角头像-账户和安全然后[安全设置]里出现“谷歌验证”的位置,点击开启按钮,到了二维码和密钥显示的界面我们不使用谷歌身份验证器,因为需 ...
Python爬虫入门有哪些基础知识点
1.什么是爬虫爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓取下来.想抓取什么?这个由你来控制它咯. ...

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