——This article begins——
1. Manipulate the style of elements
1. Set the inline style of the element
Syntax: element.style.style name = style value, set the inline style to the element
Note: Style names with underscores need to be written in camel case or array association syntax.
2. Get the inline style of the element
Syntax: element.style.style name
Get: the value of the specified style of the element
Note: You can only get the value of inline styles, not the values of non-inline styles. Style names with underscores need to be written in camel case or array association syntax.
3. Get the non-inline style of the element
Standard browser:
Syntax: window.getComputedStyle (element to be obtained).Style name
Returns: the value corresponding to the specified style of the element
Note: Style names with underscores need to be written in camel case or array association syntax. Style values can be obtained both inline and non-inline, but they can only be used under standard browsers.
IE lower version:
Syntax: element.currentStyle.style name
Get: the value corresponding to the specified style of the element
Note: The style name with an underscore needs to be written in camel case or array association syntax. The style value can be obtained both inline and non-inline, but it can only be used in low-version IE browsers.
4.Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 100px;
}
</style>
</head>
<body>
<div style="width:100px">你好世界</div>
<script>
//1.设置元素的行内样式
var box = document.getElementsByTagName('div')[0]
console.log (box);
box.style.color = 'skyblue'
//2.获取元素的行内样式
console.log (box.style.width);
console.log (box.style.height); //用的非行内式
//3.获取元素非行内样式
//标准浏览器
var res = window.getComputedStyle(box).height
console.log (res);
</script>
</body>
</html>result:
2. Manipulate element class names
1.className
In fact, it is to operate the native attribute of the element, but class is a keyword in js, so the native attribute we operate is renamed className.
Read:
Syntax: element.className
Get: The complete class name of the element, which is a string form
Write:
Syntax: element.className = 'value'
Function: Set the element class name, complete coverage setting
addition:
Syntax: element.className += 'value'
Note: A space must be written in the position of the value
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box box2"></div>
<script>
var div = document.querySelector('div')
console.log (div.className);
div.className = 'zs'
console.log (div);
div.className += ' ls'
console.log (div);
</script>
</body>
</html>result:
2.classList
Each element has an attribute called classList, which is an array-like collection that records all the class names of the element.
Add a class name:
Syntax: element.classList.add('Class name to be added')
Function: Add a class name to the element, but duplicates will not be added.
Delete a class name:
Syntax: element.classList.remove('Class name to be deleted')
Function: Delete a class name for the element
Switch a class name:
Syntax: element.classList.toggle('Class name to be switched')
Function: This element switches a class name
Switch: delete if it exists, add if it doesn’t
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>切换类名</button>
<div class="box box2"></div>
<script>
var div = document.querySelector('div')
var btn = document.querySelector('button')
console.log (div.classList);
div.classList.add('ww')
console.log (div);
div.classList.remove('ls')
console.log (div);
btn.onclick = function(){
div.classList.toggle('ww')
console.log (div);
}
</script>
</body>
</html>result:
——End of this article——