1. Operation attribute
1.1 HTML attributes corresponding to attribute 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 Properties of operation
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
Custom properties, which is a HTMLElement
property is the data-*
set of attributes.
Mainly used for saving data on the element. Attribute string are obtained.
<div id='user' data-id='1234' data-username='x' data-email='[email protected]'></div>
var div = document.getElementById('user');
console.log(div.dataset.id); // '1234'
console.log(div.dataset.username); // 'x'
console.log(div.dataset.email); // '[email protected]'
2. Operation style
2.1 CSS DOM objects correspond
<!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>
Stylesheet location:
- Inline style (for example
<p style="font-size:1rem;"></p>
) - Internal style sheet (for example
<style>body {margin: 30px;}</style>
) - External style sheet (for example
<link rel="stylesheet" type="text/css" href="sample.css">
)
2.2 Internal Style Sheet
<!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 inline style
var p = document.getElementsByTagName('p')[0];
console.log(p.style['font-size']); // 1rem
Note : This can not be used p.style.font-size
, and can only be written p.style['font-size']
.
2.4 Change Style
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
Using element.style.cssText
a plurality of inline styles is provided simultaneously.
var p = document.getElementsByTagName('p')[0];
p.style.cssText = 'color:blue;padding:10px';
2.4.3 Changing class
.add {
color:green;
padding:20px;
}
var p = document.getElementsByTagName('p')[0];
p.className += ' add';
2.4.3 Replace the stylesheet
var link = document.querySelector('link');
link.setAttribute('href', 'sample2.css');
2.5 Gets the style
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
Note : This method can only get style inline style sheets, and can not obtain internal style sheet external style sheet styles.
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;
}
Note : The style here for read-only attribute can not be modified.
Reference :