• 【Java 进阶篇】HTML DOM样式控制详解

    在这里插入图片描述

    当我们讨论网页设计时，样式是一个至关重要的方面。它使我们能够改变文本、图像和其他页面元素的外观，从而创造出吸引人的网页。在HTML DOM（文档对象模型）中，我们可以使用JavaScript来操作和控制样式。这篇博客将详细介绍HTML DOM样式控制，包括什么是样式、如何使用内联样式、如何操作类名、如何修改元素的样式属性，以及如何处理伪类和伪元素。无需担心，我们将从基础开始，逐步深入。

    什么是样式？

    在网页设计中，样式是指如何呈现或渲染页面上的各种元素。样式定义了元素的外观，包括颜色、大小、字体、边距、间距等。我们可以使用CSS（层叠样式表）来为HTML文档中的元素定义样式。

    样式通常包括以下几个方面：

    • 文本样式: 包括字体、字号、字重、颜色等。
    • 背景样式: 包括背景颜色、背景图片、背景平铺等。
    • 边框样式: 包括边框宽度、边框颜色、边框类型等。
    • 尺寸和布局: 包括元素的宽度、高度、内边距和外边距。
    • 定位: 包括元素的位置、浮动、清除浮动等。

    在HTML DOM中，我们可以使用JavaScript来读取和修改这些样式。

    如何使用内联样式

    在HTML中，您可以使用内联样式来为特定元素指定样式。内联样式是指在HTML元素的style属性中直接定义样式。以下是一个简单的示例：

    DOCTYPE html>
<html>
<head>
    <title>内联样式示例title>
head>
<body>
    <p style="color: blue; font-size: 16px;">这是一个带有内联样式的段落。p>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    在这个示例中，

    元素使用内联样式定义了文本的颜色和字号。

    在HTML DOM中，您可以使用JavaScript来访问和修改内联样式。下面是如何通过JavaScript访问上述段落的颜色和字号：

    const paragraph = document.querySelector("p");
const color = paragraph.style.color;
const fontSize = paragraph.style.fontSize;

console.log("颜色：" + color);
console.log("字号：" + fontSize);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    上述代码使用querySelector方法获取

    元素，然后使用style属性获取其内联样式的颜色和字号。

    操作类名

    除了内联样式，您还可以使用类名来为元素定义样式。类名通常在CSS中定义，并可以应用到多个元素上。在HTML DOM中，您可以使用JavaScript来添加、删除和切换元素的类名。

    示例: 添加和删除类名

    DOCTYPE html>
<html>
<head>
    <title>类名示例title>
    <style>
        .highlight {
            background-color: yellow;
        }
    style>
head>
<body>
    <p>这是一个普通段落。p>
    <p class="highlight">这是一个带有类名的段落。p>

    <script>
        // 添加类名
        const paragraph = document.querySelector("p");
        paragraph.classList.add("highlight");

        // 删除类名
        const paragraphWithClass = document.querySelector(".highlight");
        paragraphWithClass.classList.remove("highlight");
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这个示例中，我们首先在CSS中定义了名为highlight的类，然后应用到第二个

    元素上。接着，我们使用JavaScript的classList属性来添加和删除这个类名。

    示例: 切换类名

    下面是如何通过JavaScript来切换元素的类名：

    DOCTYPE html>
<html>
<head>
    <title>切换类名示例title>
    <style>
        .highlight {
            background-color: yellow;
        }
    style>
head>
<body>
    <p class="highlight">这是一个带有类名的段落。p>
    
    <button onclick="toggleHighlight()">切换类名button>

    <script>
        function toggleHighlight() {
            const paragraph = document.querySelector("p");
            paragraph.classList.toggle("highlight");
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    在这个示例中，我们定义了一个带有类名的段落，然后创建了一个按钮，按钮上有一个onclick事件处理函数toggleHighlight。这个函数使用classList的toggle方法来切换段落的类名。

    修改样式属性

    在HTML DOM中，您还可以通过JavaScript直接访问和修改元素的样式属性。这些属性包括元素的颜色、字号、背景颜色等。下面是一些示例：

    示例: 修改文本颜色和字号

    DOCTYPE html>
<html>
<head>
    <title>修改样式属性示例title>
head>
<body>
    <p>这是一个普通段落。p>
    
    <button onclick="changeStyle()">修改样式button>

    <script>
        function changeStyle() {
            const paragraph = document.querySelector("p");
            paragraph.style.color = "red";
            paragraph.style.fontSize = "20px";
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在这个示例中，我们创建了一个按钮，点击按钮会触发changeStyle函数，该函数使用style属性来修改段落的文本颜色和字号。

    示例: 修改背景颜色

    DOCTYPE html>
<html>
<head>
    <title>修改背景颜色示例title>
head>
<body>
    <div id="myDiv">这是一个带有背景颜色的块级元素。div>
    
    <button onclick="changeBackgroundColor()">修改背景颜色button>

    <script>
        function changeBackgroundColor() {
            const div = document.getElementById("myDiv");
            div.style.backgroundColor = "lightblue";
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在这个示例中，我们有一个包含背景颜色的

    元素。点击按钮将触发changeBackgroundColor函数，该函数使用style属性来修改
    元素的背景颜色。

    处理伪类和伪元素

    在CSS中，伪类和伪元素用于选择元素的特定状态或位置。在HTML DOM中，我们可以使用JavaScript来操作伪类和伪元素。

    示例: 操作伪类

    DOCTYPE html>
<html>
<head>
    <title>操作伪类示例title>
head>
<body>
    <a href="https://www.example.com">这是一个链接a>
    
    <button onclick="toggleVisited()">切换伪类button>

    <script>
        function toggleVisited() {
            const link = document.querySelector("a");
            link.classList.toggle("visited");
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在这个示例中，我们有一个超链接元素。点击按钮将触发toggleVisited函数，该函数使用classList来切换visited伪类，从而改变链接的样式。

    示例: 操作伪元素

    DOCTYPE html>
<html>
<head>
    <title>操作伪元素示例title>
    <style>
        p::first-letter {
            color: red;
        }
    style>
head>
<body>
    <p>这是一个段落。p>
    
    <button onclick="toggleFirstLetter()">切换伪元素button>

    <script>
        function toggleFirstLetter() {
            const paragraph = document.querySelector("p");
            const firstLetter = paragraph.shadowRoot.querySelector("::first-letter");
            firstLetter.style.color = "blue";
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    在这个示例中，我们为段落的第一个字母定义了红色的伪元素样式。点击按钮将触发toggleFirstLetter函数，该函数使用querySelector和shadowRoot属性来获取伪元素，并修改其样式颜色为蓝色。

    总结

    HTML DOM提供了强大的样式控制功能，允许您通过JavaScript来访问和修改元素的样式。您可以使用内联样式、操作类名、修改样式属性，以及处理伪类和伪元素。这些功能使您能够动态地改变页面元素的外观，从而实现更加交互和吸引人的网页设计。

    通过这篇博客，我们详细介绍了HTML DOM样式控制的各个方面。希望这对您理解和应用JavaScript与HTML DOM之间的关系以及如何控制元素的样式有所帮助。如果您有任何问题或需要进一步的帮助，请随时向我提问。

    作者信息

    作者 ： 繁依Fanyi
    CSDN： https://techfanyi.blog.csdn.net
    掘金：https://juejin.cn/user/4154386571867191
  • 相关阅读:
    微服务技术发展
    Android Studio / IDEA 调试金手指：live template自动打印方法名以及所有变量
    读写分离MySQL
    java特种兵读书笔记（4-2）——java通信之IO与内存
    C语言：多进程的详细介绍
    mysql查询速度 limit 1000,10 和limit 10 一样快吗？
    二十四节气-立冬文案、海报。万物收藏，冬之伊始。
    为什么表数据删一半，表文件大小不变？
    矿物鉴定VR实践教学平台：打造全新的沉浸式学习体验
    腾讯音乐：说说Redis脑裂问题？
  • 原文地址：https://blog.csdn.net/qq_21484461/article/details/133916658