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编程的更多相关文章

  1. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  2. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

  3. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  4. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  5. Dom样式操作-属性操作

    1. 对样式进行操作: 1) 以样式(C1,C2等)为最小单位进行修改. className, classList, (以列表形式获得) classList.add("C2"), ...

  6. dom操作 属性操作 样式操作

    jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...

  7. 4月12日学习笔记——jQuery操作属性和样式

    区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus ...

  8. JQuery操作属性、样式、风格(attr、class、css)

    样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...

  9. jQuery-对标签元素 文本操作-属性操作-文档的操作

    一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...

随机推荐

  1. Elasticsearch备份数据

    Elasticsearch备份数据 1.建立备份目录 POST _snapshot/my_backup/ { "type": "fs", "setti ...

  2. 文件上传漏洞fuzz字典生成脚本小工具分享

    前言 学习xss的时候翻阅资料发现了一个文件上传漏洞fuzz字典生成脚本小工具,试了试还不错,分享一下 配置 需要python2环境 工具地址:https://github.com/c0ny1/upl ...

  3. HTML学习分享(一)

    HTML学习小结(一) 1.css的全称是什么? 2.样式表的组成 3.浏览器读取编译css的顺序? (1)HTML基本选择器 1.通配符选择器 * { margin: 0; padding: 0; ...

  4. JavaScript动画实例:曲线的绘制

    在“JavaScript图形实例:曲线方程”一文中,我们给出了15个曲线方程绘制图形的实例.这些曲线都是根据其曲线方程,在[0,2π]区间取一系列角度值,根据给定角度值计算对应的各点坐标,然后在计算出 ...

  5. OSCP Learning Notes - WebApp Exploitation(5)

    Remote File Inclusion[RFI] Prepare: Download the DVWA from the following website and deploy it on yo ...

  6. Docker部署LNMP完整教程

    在Docker中部署LNMP环境可以分为以下几个步骤: 安装Docker 创建镜像 创建Dockerfile build Docerfile 复制/修改配置文件 运行镜像,并映射端口 为了方便分布式部 ...

  7. ​​​​​​​爆力破解Windows操作系统登录密码核心技术

    一.不借助U盘等工具二.已将win7登录账户为test,密码为666666,全套C/C++黑客资料请加:726920220QQ 1.将电脑开机关机几次,进入以下界面

  8. 微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

    (一) 准备工作 (1) 登录注册 注册账号:这就不谈了,只需要注意使用一个全新的邮箱,别之前注册过公众号小程序等就可以了 https://mp.weixin.qq.com/wxopen/waregi ...

  9. Spring Cloud Alibaba教程:Nacos

    Nacos是什么 Nacos 致力于帮助您发现.配置和管理微服务,它 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量管理. 注册中心 nacos-server 可以 ...

  10. 用windbg查看dmp文件,定位bug位置

    windbg + .dmp + .pdb + 源代码,可以看到是哪个代码崩溃的 设置符号文件所在路径 File->Symbol File Path... 在输入框中填入.pdb文件所在的文件夹路 ...