JavaScript 如何使用EventListner方法更改CSS属性

在本文中，我们将使用JavaScript通过从用户那里获取的输入来更新网页的CSS样式。通常，我们会看到一些网页通过接收用户输入来动态更新各种样式属性，从而提高用户与网页的互动，并通过吸引用户来改善整体用户体验。在这里，我们将提供几个输入选项，例如背景颜色、文字颜色、字体大小、文字装饰和对齐方式，以便通过使用事件监听器来实现这些修改来自定义网页的样式。完成后，将显示下面的图片：

我们将从一些默认值开始，允许用户进行更改，如上所示。

方法

首先，使用HTML标签（如div、span、input、button等）创建基本布局，同时添加相关的类名和id。添加所需的文本和输入框。
使用CSS属性（如display、margin padding、font size、height、width和border）为页面添加样式。
在JavaScript中，使用HTML DOM方法（如getElementById和getElementByName）访问和修改HTML元素。
使用JavaScript数组解构来语义化地存储输入。
定义一个名为update的JavaScript函数，用于在点击更新按钮时更新样式。
使用addEventListener方法将更新按钮的点击事件链接起来，并调用update函数应用修改。

示例： 在这个例子中，我们将使用addEventListener方法来识别“点击”事件，以更新网页的CSS。

HTML

<!-- index.html -->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" /> 
    <link rel="stylesheet" 
          href="style.css" /> 
    <title>CSS modifier</title> 
</head> 
  
<body> 
    <div id="root"> 
        <h1>GeeksforGeeks</h1> 
        <p>A Computer Science portal!</p> 
        <br /> 
        <p> 
            You can change the CSS Stylings using 
            JavaScript 
        </p> 
        <br /> 
        <div class="inputs"> 
            <div class="inputitem"> 
                <p style="width: 20rem"> 
                    Background color: 
                </p> 
                <input name="mod" 
                       type="text" 
                       value="Grey"
                       placeholder="Default: Grey" /> 
            </div> 
            <div class="inputitem"> 
                <p style="width: 20rem">Text color:</p> 
                <input name="mod" 
                       type="text" 
                       value="Black"
                       placeholder="Default: Black" /> 
            </div> 
            <div class="inputitem"> 
                <p style="width: 20rem">Font size:</p> 
                <input name="mod" 
                       type="text" 
                       value="20px" 
                       placeholder="Default: 20px" /> 
            </div> 
            <div class="inputitem"> 
                <p style="width: 20rem"> 
                    Text Decoration: 
                </p> 
                <input name="mod" 
                       type="text" 
                       value="none" 
                       placeholder="Default: none" /> 
            </div> 
            <div class="inputitem"> 
                <p style="width: 20rem"> 
                    Text Alignment: 
                </p> 
                <input name="mod" 
                       type="text" 
                       value="centre" 
                       placeholder="Default: centre" /> 
            </div> 
        </div> 
        <button id="updateButton">Update</button> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* Styling universal selector */
* { 
    margin: 2%; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
body { 
    display: flex; 
    align-items: center; 
    text-align: center; 
    justify-content: center; 
    background-color: rgb(231, 231, 231); 
    font-family: "Poppins", sans-serif; 
} 
  
#root { 
    min-height: 50vh; 
    background-color: grey; 
    font-size: 20px; 
    height: 100%; 
    width: 50rem; 
    margin: 0 1rem; 
    padding: 1rem; 
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); 
    border-radius: 0.5rem; 
  
} 
  
.inputs { 
    display: flex; 
    flex-direction: column; 
} 
  
.inputitem { 
    display: flex; 
    flex-direction: row; 
} 
  
input { 
    font-size: large; 
    border-radius: 0.25rem; 
} 
  
button { 
    font-size: larger; 
    padding: 1%; 
    border-radius: 0.5rem; 
}

JavaScript

// Main div element to apply modifications 
let root = document.getElementById("root").style; 
  
let mod = document.getElementsByName("mod"); 
let [bg, color, size, decoration, align] = [...mod]; 
  
// Function to update styling 
function update() { 
    console.log("updated"); 
    root.color = color.value; 
    root.backgroundColor = bg.value; 
    root.fontSize = size.value; 
    root.textDecoration = decoration.value; 
    root.textAlign = align.value; 
} 
  
// To update properties first time 
update(); 
  
const button = document.getElementById("updateButton"); 
  
// Using addEventListner to listen to 
// click event and call update function 
button.addEventListener("click", update);

输出：

JavaScript 如何使用EventListner方法更改CSS属性