基础代码
1. HTML 代码
<div>原样式</div>
2. CSS 样式
div {
width: 200px;
height: 60px;
line-height: 60px;
border: 1px solid red;
margin-bottom: 30px;
text-align: center;
}
3. 效果
一、className设置类名
通过改变元素的类名，从而使 CSS 样式发生变化
改变 class 类名
1.1 HTML 代码
简单加个类名
<div id="className">className</div>
1.2 CSS 样式
简单写个类名
.bgYellow {
background-color: yellow;
}
1.3 JavaScript 代码
let div = document.querySelector('#className')
div.className = 'bgYellow'
1.4 效果
二、直接设置属性名
直接对属性名进行设置，有缺陷，只有部分样式生效
添加到嵌入式的 css 样式中
2.1 HTML 代码
<div id="directly">直接设置属性</div>
2.2 JavaScript 代码
let div = document.querySelector('#directly')
div.style.backgroundColor = 'blue'
div.style.color = '#fff'
2.3 效果
三、style.cssText
本质就是设置元素的 style 的属性值
添加到嵌入式的 css 样式中
3.1 HTML 代码
<div id="cssText">cssText</div>
3.2 JavaScript 代码
let div = document.querySelector('#cssText')
div.style.cssText = 'background-color:green;'
div.style.cssText += 'color:#fff;'
3.3 效果
四、setAttribute()
增加一个指定名称和值的新属性,或者修改已有属性的值
4.1 HTML 代码
<link rel="stylesheet" href="css1.css" id="css">
<div id="setAttribute">setAttribute</div>
4.2 JavaScript 代码
// 可以直接修改 link 的引入文件
let css = document.querySelector('#css')
css.setAttribute('href', 'css2.css')
let div = document.querySelector('#setAttribute')
div.setAttribute('style', 'background-color:pink; color:#fff;')
4.3 效果
五、setProperty
用于新增一个新的 css 属性,或者修改已有的属性
添加到嵌入式的 css 样式中
5.1 HTML 代码
<div id="setProperty">setProperty</div>
5.2 JavaScript 代码
let div = document.querySelector('#setProperty')
div.style.setProperty('background-color', 'red')
div.style.setProperty('color', '#fff')
5.3 效果
完整代码
点击查看代码
<!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>
<link rel="stylesheet" href="css1.css" id="css" />
<style>
div {
width: 200px;
height: 60px;
line-height: 60px;
border: 1px solid red;
margin-bottom: 30px;
text-align: center;
}
.bgYellow {
background-color: yellow;
}
</style>
</head>
<body>
<div>原样式</div>
<div id="className">className</div>
<div id="directly">直接设置属性</div>
<div id="cssText">cssText</div>
<div id="setAttribute">setAttribute</div>
<div id="setProperty">setProperty</div>
<script>
{
// 通过 className 设置类名
let div = document.querySelector('#className')
div.className = 'bgYellow'
}
{
// 直接设置属性
let div = document.querySelector('#directly')
div.style.backgroundColor = 'blue'
div.style.color = '#fff'
}
{
// 通过 cssText 设置属性
let div = document.querySelector('#cssText')
div.style.cssText = 'background-color:green;'
div.style.cssText += 'color:#fff;'
}
{
// 通过 setAttribute 设置属性
let css = document.querySelector('#css')
css.setAttribute('href', 'css2.css')
let div = document.querySelector('#setAttribute')
div.setAttribute('style', 'background-color:pink; color:#fff;')
}
{
// 通过 setProperty 设置属性
let div = document.querySelector('#setProperty')
div.style.setProperty('background-color', 'red')
div.style.setProperty('color', '#fff')
}
</script>
</body>
</html>
原创文章，作者：kirin，如若转载，请注明出处：https://blog.ytso.com/277233.html