JavaScript 如何使用下划划线一个Div元素的文本

使用div的下划线文本可以帮助强调特定的单词或短语，并使它们在页面的其他内容中脱颖而出。

要使用JavaScript在div元素中添加下划线文本，可以使用div的style属性来设置text-decoration。

文本装饰： text-decoration属性用于指定文本是否应该是下划线、上划线、贯穿线或闪烁。下划线和上划线装饰位于文本下方，而贯穿线位于文本上方。

语法:

element.style.textDecoration

示例1： 在此示例中，我们添加一个按钮，当点击按钮时，文本将被下划线，点击按钮会调用underlineText()函数。该函数使用getElementById方法选择具有ID为underline-text的div元素，然后将其style属性设置为“underline”。

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>Geeksforgeeks</title> 
    <style> 
        .gfg { 
            padding: 10px; 
        } 

        button { 
            padding: 10px 10px 10px 10px; 
            background: green; 
            color: white; 
            border: none; 
            border-radius: 6px; 
            cursor: pointer; 
            transition: all linear 0.5s; 
        } 

        button:hover { 
            transform: translate(0px, -6px); 
        } 
    </style> 
</head> 

<body> 
    <div class="gfg"> 
        <div id="underline-text"> 
            <h1>Welcome To Geeksforgeeks!!</h1> 
        </div> 
        <button onclick="underlineText()"> 
            Click to underline text 
        </button> 
    </div> 

    <script> 
        function underlineText() { 
            // Get the div element 
            const divElement = document.getElementById("underline-text"); 

            // Underline the text in the div 
            divElement.style.textDecoration = "underline"; 
        } 

    </script> 
</body> 

</html>

输出:

JavaScript 如何使用下划划线一个Div元素的文本

示例2： 在以下示例中，我们首先获取用户输入，然后在点击按钮时显示输出。通过使用元素ID takeInput 获取用户输入，然后通过使用元素ID output 显示输出。

如果输入为空，则显示提示信息。如果用户输入不为空，我们将创建一个带有下划线文本的新字符串。

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>Geeksforgeeks</title> 
    <style> 
        .container { 
            text-align: center; 
        } 

        .text-div { 
            margin: 50px auto; 
            width: 80%; 
        } 

        label { 
            display: block; 
            margin-bottom: 10px; 
        } 

        input[type="text"] { 
            padding: 8px; 
            border: 1px solid #ccc; 
            border-radius: 4px; 
            width: 100%; 
            box-sizing: border-box; 
            font-size: 16px; 
            margin-bottom: 10px; 
        } 

        button { 
            padding: 10px 10px 10px 10px; 
            margin-bottom: 1rem; 
            background: green; 
            color: white; 
            border: none; 
            border-radius: 6px; 
            cursor: pointer; 
            transition: all linear 0.5s; 
        } 

        button:hover { 
            transform: translate(0px, -6px); 
        } 
    </style> 
</head> 

<body> 
    <div class="container"> 
        <h1>Underline Text Example</h1> 
        <div class="text-div"> 
            <label for="takeInput">Enter text to underline:</label> 
            <input type="text" id="takeInput"> 
            <button onclick="underlineText()">Click to underline</button> 
            <div id="output"></div> 
        </div> 
    </div> 

    <script> 
        function underlineText() { 
            // Get the user input 
            const takeInput = document.getElementById("takeInput").value; 

            // Get the output element 
            const output = document.getElementById("output"); 

            // Check if user input is empty 
            if (takeInput === "") { 
                output.innerHTML = "Please enter some text to underline."; 
                return; 
            } 

            // Create a new string with the underlined text 
            const underlinedText = "<u>" + takeInput + "</u>"; 

            // Set the innerHTML of the output element to the underlined text 
            output.innerHTML = underlinedText; 
        } 

    </script> 
</body> 

</html>

输出:

JavaScript 如何使用下划划线一个Div元素的文本