js控制僞元素
-
-
- 1.通過attr()改變僞元素的值
- 2.覆寫原有樣式
-
- （1）css優先級覆寫
- （2）更改class類名覆寫
- （3）内聯樣式表覆寫
-
大家應該知道js是不能直接控制僞元素的，是以總結了倆方法。下面是未改變前的代碼和實作效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
}
.box:before{
content: '阿花';color: red;font-size: 24px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
1.通過attr()改變僞元素的值
僞元素通過attr()來擷取标簽自定義屬性的值。這個方法的缺點就是隻能改變僞元素的值，而不能改變僞元素的屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<style>
.box{
width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
}
.box:before{
content: attr(dataBefore);color: red;font-size: 24px;
}
</style>
</head>
<body>
<div class="box" dataBefore="阿花"></div>
<script>
var box=document.querySelector('.box');
box.setAttribute('dataBefore','謝謝你');//第二個值為‘’就是僞元素隐藏效果
</script>
</body>
</html>
2.覆寫原有樣式
這個方法能更改僞元素的值和樣式，缺點就是會造成部分css多餘代碼，設定content:’ ’ 就可以實作僞元素隐藏效果，當然你也可以設定opacity=0或者display=none都行，看需求
（1）css優先級覆寫
為父元素添加一個新的class類名。後面類名的優先級會高于前面的，将前面的樣式覆寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
}
.box:before{
content: '阿花';color: red;font-size: 24px;
}
.skate:before{
/*提前寫在css樣式表裡，js添加完skate類名後便會覆寫前面box的樣式*/
content: '謝謝你';color: blue;font-size: 24px;}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
box.classList.add('skate');//添加classname skate
</script>
</body>
</html>
（2）更改class類名覆寫
在css中寫好新類名的樣式，通過js修改類名，之前的樣式就會失效（可以看一下和上一個方法其實沒什麼太大差別）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
}
.box:before{
content: '阿花';color: red;font-size: 24px;
}
.skate{
width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
}
.skate:before{
content: '謝謝你';color: blue;font-size: 24px;}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
box.className='skate';//更改classname為skate
</script>
</body>
</html>
（3）内聯樣式表覆寫
這個适用的前提是你的css寫在了外部樣式表中，用js動态添加一個内聯樣式，内聯樣式優先級大于外部樣式，外部樣式就會失效；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
<script>
var style=document.createElement('style');//建立一個<style>标簽
var change=document.createTextNode('.box:before{content:"謝謝你";color:blue;}')//更改後僞元素的樣式
style.appendChild(change);//把樣式添加到style标簽裡
document.body.appendChild(style);//把内聯樣式表添加到html中
</script>
</body>
</html>
js執行的結果就相當于在head頭部前面添加了一個style的内聯樣式表