WebAPI-操作元素属性

最新推荐文章于 2022-10-19 16:09:55 发布

HOO00oo

最新推荐文章于 2022-10-19 16:09:55 发布

阅读量194

点赞数

分类专栏： WebAPI 文章标签： javascript

本文链接：https://blog.csdn.net/HOO00oo/article/details/115918803

版权

WebAPI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 基本属性

语法	作用
元素.id	获取id
元素.className	获取类名
元素.innerText	获取文本
元素.href	获取链接（常用于a标签）
元素.src	获取路径(常用于img标签)
元素.style	获取css样式对象(获取的是一个对象类型，包含所有css熟悉)
元素.style.backgroundColor	获取css样式的颜色（带`-`的css样式，需要使用驼峰命名来获取）

方法：

访问：元素.属性名，如，元素.id
修改：元素.属性名 = 新值，如，元素.className = ‘item’
新增：元素.属性名 = 值，如，元素.src = ‘images/girl.jpg’

案例

    <body>
        <div class="box item current">
            大家好，我是小白，请各位大佬多多指教
            <a href="http://www.itcast.cn"
                ><img src="images/cloud.gif" alt=""
            /></a>
            <span id="mark">我是带ID的</span>
        </div>
        <script>
            // 操作元素：第一步是获取元素
            let box = document.querySelector(".box");
            console.log(box);

            // 访问属性：类名className
            console.log(box.className); // 打印所有类名

            let a = document.querySelector(".box a");
            // href：a标签特有的
            console.log(a.href);

            let img = document.querySelector(".box img");
            // src：img（audio\vedio）
            console.log(img.src);

            let span = document.querySelector("#mark");
            // 获取id
            console.log(span.id);

            // innerText：获取标签内部文本
            console.log(span.innerText);

            // 修改：元素.属性名 = 新值
            box.className = "now";
            console.log(box.className);

            // 所有属性都可以改
            span.innerText = "我是小白";
            console.log(span.innerText);

            // 新增属性：元素.属性名 = 新值
            span.className = "add";
            console.log(span.className, span.id);

            /*
                基本属性操作使用最多的情况
                    1.类名：需要修改（一般是修改）
                    2.href属性：更换链接
                    3.src属性：更换资源路径
            */
        </script>
    </body>

2. 样式属性

JS只能操作元素的行内样式。

元素.style：操作的本质是元素的style属性行内样式
具体样式操作
- 访问：元素.style.样式名，结果带单位
- 操作：元素.style.样式名 = 值，结果带单位
- 样式名规则：小驼峰法

案例

<!DOCTYPE html>
<html lang="zh-CN">
    <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>Document</title>
        <style>
            .news {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div
            class="news"
            style="
                height: 100px;
                background-color: aquamarine;
                border-radius: 10px;
            "
        >
            <ul>
                <li><a href="#">两会正式开幕</a></li>
                <li><a href="#">两会正式开幕</a></li>
                <li><a href="#">两会正式开幕</a></li>
            </ul>
        </div>

        <script>
            // 样式操作

            // 获取元素
            let news = document.querySelector(".news");

            // 获取行内样式
            console.log(news.style); //得到所以样式（只能获取行内样式）

            // 访问具体样式：样式属性写成小驼峰形式
            console.log(news.style.borderRadius); // 去掉短横线，改为小驼峰

            console.log(news.style.height); //带单位的属性 获取的都是 字符串

            // 修改样式
            news.style.height = 200 + "px"; // 字符串拼接 带单位 的属性

            let li = document.querySelector(".news li");
            console.log(li);
            li.style.backgroundColor = "#eee";
        </script>
    </body>
</html>

3. 类名操作

案例

<!DOCTYPE html>
<html lang="zh-CN">
    <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>Document</title>
        <style>
            .box {
                width: 100px;
                height: 100px;
                line-height: 100px;
            }

            .item {
                border-radius: 50%;
                text-align: center;
            }

            .one {
                background-color: red;
            }

            .two {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="box item one">我是小白</div>
        <script>
            // 需求：修改盒子box的颜色
            // 只要操作想要操作的类即可（不影响别的类）

            // 看到所有类：是一个对象，这个对象提供了两个方法操作类：
            // classList.add('添加类')
            // classList.remove('删除类')

            // 解决方案：干掉类名one，添加类名two

            // 1. 获取元素
            let box = document.querySelector(".box");

            // classList：获取元素的所有类
            console.log(box.classList);

            // 2. 修改类名
            // 2.1 移除不需要的类名
            box.classList.remove("one");
            // 2.2 添加所需的类名
            box.classList.add("two");
        </script>
    </body>
</html>

4. 表单属性

语法	作用
元素.value	获取文本
元素.disabled	获取禁用状态（布尔类型）
元素.checked	获取选中状态（用于radio/checkbox）
元素.selected	获取选中状态(用于option)

表单.value：针对表单的value属性，可以获取和修改（一般是获取）。
表单.disabled：针对表单的disabled属性，值为true表示禁用，false表示可用。
表单.checked：针对单选框、复选框的checked属性，值为true表示选中，false表示不选中。
注意：disabled和checked的布尔值是js操作的效果，不是写在html元素中

<!DOCTYPE html>
<html lang="zh-CN">
    <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>Document</title>
        <style></style>
    </head>
    <body>
        用户名：<input
            type="text"
            name="username"
            id="un"
            value="我是小白"
            disabled
        /><br />
        密&emsp;码：<input
            type="password"
            name="password"
            id="pwd"
            value="123456"
        /><br />
        性&emsp;别：<input type="radio" name="gender" id="g1" />男
        <input type="radio" name="gender" id="g2" checked /> 女 <br />
        爱&emsp;好：<input type="checkbox" name="hobby" id="h1" /> 篮球
        <input type="checkbox" name="hobby" id="h2" checked /> 足球

        <script>
            let username = document.querySelector("#un");
            console.log(username);

            let password = document.querySelector("#pwd");
            console.log(password);

            // 属性选择器
            let gender = document.querySelectorAll('[name="gender"]');
            let hobby = document.querySelectorAll('[name="hobby"]');

            // 获取值：元素.value
            console.log(username.value);
            username.value = "凭什么";

            // 单选按钮的选中状态
            console.log(gender, gender[0], gender[1]);

            // 选中控制：checked属性
            // JS通过布尔true和false来控制元素是否用拥有 checked属性
            console.log(gender[0].checked); // false 表示单选 没有默认选中
            console.log(gender[1].checked); // true 表示单选 默认选中 ==> 性别默认选中  女

            // 修改选中
            gender[0].checked = true; // 修改  性别默认选中 男

            // 表单属性： disabled
            console.log(username.disabled); // true  用户名拥有disabled属性，即禁用 用户名 表单

            // 为 密码 添加表单 disabled属性（禁用表单）
            password.disabled = true;
        </script>
    </body>
</html>

HOO00oo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebAPI-操作元素属性

1. 基本属性语法作用元素.id获取id元素.className获取类名元素.innerText获取文本元素.href获取链接（常用于a标签）元素.src获取路径(常用于img标签)元素.style获取css样式对象(获取的是一个对象类型，包含所有css熟悉)元素.style.backgroundColor获取css样式的颜色（带-的css样式，需要使用驼峰命名来获取）方法：访问：元素.属性名，如，元素.id修改：元素.
复制链接

扫一扫