So verwenden Sie JS zum Ändern von CSS-Stilen-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

So verwenden Sie JS zum Ändern von CSS-Stilen

Apr 08, 2021 pm 02:35 PM

So verwenden Sie JS zum Ändern von CSS-Stilen

In diesem Artikel wird hauptsächlich beschrieben, wie Sie die JavaScript对CSS样式中的行内样式和类样式进行更改，简化日常的操作流程，让HTML-Benutzeroberfläche einfacher nutzen können. Inhalt in

html:

<!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>css操作</title>
    <style>
        .bgn-cyan{
            background-color: cyan;
        }
        .bgn-yellow{
            background-color: #ff0;
        }
        .border{
            border:3px solid #000;
        }
        .bolder{
            font-weight: bolder;
        }
        p{
            height: 25px;
        }
    </style>
</head>
<body>
</body>
</html>

Nach dem Login kopieren

1. Inline-Stil

<script>
 
        //获取p标签元素
        const p=document.querySelector("p");
       //验证是否获取成功
        console.log(p);
        p.style.color="red";
    </script>

Nach dem Login kopieren

2. Klassenstil

<script>
         const p=document.querySelector("p");
        //添加类样式
        p.classList.add("bgn-cyan");
        //添加多个类样式
        p.classList.add("border","bolder");
        //对于样式的移除
        p.classList.remove("bolder","border");
        //对样式的替换
        p.classList.replace("bgn-cyan","bgn-yellow");
        //对是否有这个样式进行取反
        p.classList.toggle("bgn-cyan");
        //原有样式（"bgn-cyan"）被替换过后replace("bgn-cyan","bgn-yellow") 使用toggle("bgn-cyan")无法实现
</script>

Nach dem Login kopieren

Empfohlen: " Fragen und Antworten zum js-Interview 2021 (große Zusammenfassung) 》

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS zum Ändern von CSS-Stilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn