js-10-标签操作

原创已于 2024-05-08 15:22:52 修改 · 43 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-11-08 11:52:13 首次发布

js-基础专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sty-1{
            font-size:20px;
            color:darkred;
        }
        .sty-2{
            font-size: 30px;
            color: #1a7bb9;
        }
    </style>
</head>
<body>
    <input type="text" name="set-size" id="input_1" value="20px">
    <a href="https://www.bai.com" id="link-1" class="sty-1">这是一个连接</a>
</body>
<script>
    window.onload = function () {
        var my_input = document.getElementById('input_1')
        var my_link = document.getElementById('link-1')
        //读取属性
        var input_value = my_input.value
        var link_url = my_link.href
        console.log(input_value)
        console.log(link_url)
        //动态操作属性
        my_input.className='sty-2'
    }
</script>
</html>