操作属性、操作样式

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

随机推荐

数据可视化之DAX篇（十四）DAX函数：RELATED和RELATEDTABLE
https://zhuanlan.zhihu.com/p/64421378 Excel中知名度最高的函数当属VLOOKUP,它的确很有用,可以在两个表之间进行匹配数据,使工作效率大大提升,虽然它也有很 ...
AcWing 94. 递归实现排列型枚举
AcWing 94. 递归实现排列型枚举题目链接把 1~n 这 n 个整数排成一行后随机打乱顺序,输出所有可能的次序. 输入格式一个整数n. 输出格式按照从小到大的顺序输出所有方案,每行1个. ...
GitHub 热点速览 Vol.28：有品位程序员的自我修养
作者:HelloGitHub-小鱼干摘要:一个程序员除了技术好,还得品位高,有什么比一个高颜值的 GUI 更能体现你品味的呢?rocketredis 就是一个高颜值.简约的 Redis 管理界面,比 ...
计算机网络期末实验考题（Pacekt Tracer搭建网络拓扑实现通信）
期末考试的这一道实验题目具体要求如下: 搭建一个包含5个路由器.两个交换机和3个PC机的连通网络,网络拓扑结构自定,网络IP地址,子网掩码等信息自定, 最后实现3个PC机互通.要求:1)3个PC ...
循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制
在一个业务管理系统中,如果我们需要实现权限控制功能,我们需要定义好对应的权限功能点,然后在界面中对界面元素的功能点进行绑定,这样就可以在后台动态分配权限进行动态控制了,一般来说,权限功能点是针对角色进 ...
SpringBoot2.x入门：使用MyBatis
这是公众号<Throwable文摘>发布的第25篇原创文章,收录于专辑<SpringBoot2.x入门>. 前提这篇文章是<SpringBoot2.x入门>专辑的 ...
手动造轮子——为Ocelot集成Nacos注册中心
前言近期在看博客的时候或者在群里看聊天的时候,发现很多都提到了Ocelot网关的问题.我之前也研究过一点,网关本身是一种通用的解决方案,主要的工作就是拦截请求统一处理,比如认证.授权.熔断. ...
Cordova iPhone 刘海屏和安卓瀑布屏等异形屏幕的适配处理
1. 在cordova项目的config.xml中指定StatusBarOverlaysWebView(需要cordova-plugin-statusbar插件支持),表示应用界面是否覆盖状态栏(系 ...
学习2周C++的收获
学习2周C++的收获首先,C++是一种实用性很强的程序设计语言.它使用起来灵活.方便,运算符丰富,有结构化的层次…… 那么,我学习这个语言主要是为了参加信息学奥林匹克竞赛,这不仅要熟练地掌握一门语言 ...
Mybatis（一）Mybatis简介与入门程序
Mybatis简介: MyBatis是一个优秀的持久层框架,它对jdbc的操作数据库的过程进行封装,使开发者只需要关注 SQL 本身,而不需要花费精力去处理例如注册驱动.创建connection.创建 ...

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