js操作元素样式、内容、属性方法

最新推荐文章于 2022-03-04 21:25:40 发布

n7%

最新推荐文章于 2022-03-04 21:25:40 发布

阅读量241

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Love_Roro/article/details/110949607

版权

js操作元素样式

js操作元素样式：

获取元素对象
通过style属性
元素对象名.style.样式名=“样式值”
作用：获取类名
元素对象名.style.样式名=" "

样式代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
        <input type="text" name="" id="">
   <script>
       var box = document.querySelector('.box')
       var input = document.querySelector('input')
       
        input.addEventListener('keyup', function () {
            if (this.value.length > 0) {
                box.style.visibility = 'visible'
            } else {
                box.style.visibility = 'hidden'
            }          
            box.innerHTML = this.value
        })
        input.addEventListener('blur',function(){
            box.style.visibility = 'hidden'
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述

js操作元素属性

元素.属性名
作用：获取表单的内容
元素.属性名 = “值”
作用：设置表单的内容

js操作类名

元素.className
作用：获取类名
元素.className = “指定的类名”
作用：设置表单的内容

js操作元素表单

元素.value
作用：获取表单的内容
元素.value=“值”
作用：设置表单的内容

n7%

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作元素样式、内容、属性方法

js操作元素样式js操作元素样式：获取元素对象通过style属性元素对象名.style.样式名=“样式值”作用：获取类名元素对象名.style.样式名=" "样式代码案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
复制链接

扫一扫