Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie JS zum Ändern von CSS-Stilen

So verwenden Sie JS zum Ändern von CSS-Stilen

autoload
autoloadOriginal
2021-04-08 14:35:552104Durchsuche

So verwenden Sie JS zum Ändern von CSS-Stilen

In diesem Artikel wird hauptsächlich beschrieben, wie Sie die JavaScriptCSS样式中的行内样式和类样式进行更改,简化日常的操作流程,让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>

1. Inline-Stil

<script>

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

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>

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!

Stellungnahme:
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

In Verbindung stehende Artikel

Mehr sehen