JavaScript - 操作元素 - 修改元素属性和样式属性

最新推荐文章于 2024-04-23 22:42:34 发布
最新推荐文章于 2024-04-23 22:42:34 发布
阅读量1.4k 收藏 7
点赞数 1
分类专栏： JavaScript 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33962481/article/details/118030829
版权

文章目录

一、修改元素属性

语法

元素. 属性 = 新的值;

使用

<body>
    <button id='btn1'>第一张</button>
    <button id='btn2'>第二张</button> <br>
    <img src="./images/1.jpg" alt="">

    <script>
        // 获取元素
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        var img1 = document.querySelector('img');

        // 绑定事件
        btn2.onclick = function () {
            img1.src = './images/2.jpg';
        }
        btn1.onclick = function () {
            img1.src = './images/1.jpg';
        }

    </script>
</body>

案例 : 分时问候并显示不同的图片

<body>
    <p>早上好</p>
    <img src="./images/zao.jpg" alt="">
    <script>
        // 1. 获取元素
        var p = document.querySelector('p');
        var img = document.querySelector('img');
        var hours = new Date().getHours();

        if (hours < 12 && hours > 0) {
            p.innerHTML = '早上好';
            img.src = './images/zao.jpg';
        } else if (hours > 12 && hours < 20) {
            p.innerHTML = '中午好';
            img.src = './images/zhong.jpg';
        } else {
            p.innerHTML = '晚上好';
            img.src = './images/wan.jpg';
        }
    </script>
</body>

二、修改表单属性

<!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>Document</title>
</head>

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">

    <script>
        // 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 绑定事件
        btn.onclick = function () {
            // 表单里面的值, 是通过 value 来修改的.
            input.value = '...';
            // 如果想要某个表单被禁用, 不能再点击.
            btn.disabled = true;
        }
    </script>
</body>

</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>Document</title>
</head>

<body>
    <input type="password">
    <button>眼睛</button>
    <script>
        // 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 绑定事件
        // 鼠标按下显示密码
        btn.onmousedown = function () {
            input.type = 'text';
        }
        // 鼠标松开隐藏密码
        btn.onmouseup = function () {
            input.type = 'password';
        }

    </script>
</body>

</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>Document</title>
</head>

<body>
    <input type="password">
    <button>眼睛</button>
    <script>
        // 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');

        var flag = 0;
        btn.onclick = function () {
            if (flag) {
                input.type = 'password';
                flag--;
            } else {
                input.type = 'text';
                flag++;
            }
        }

    </script>
</body>

</html>

四、修改样式属性

可以通过JS修改元素的大小, 颜色, 位置等样式.

element.className : 类名样式操作.
element.style : 行内样式操作.

<!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>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 获取元素
        var di = document.querySelector('div');
        di.onclick = function () {
            this.style.backgroundColor = 'pink';
        }
    </script>
</body>

</html>

this 指向当前函数的调用者
JS修改style样式操作, 产生的是行内样式, 权重较高

关闭二维码案例

<!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>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?c9xd3i');
            src: url('fonts/icomoon.eot?c9xd3i#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?c9xd3i') format('truetype'),
                url('fonts/icomoon.woff?c9xd3i') format('woff'),
                url('fonts/icomoon.svg?c9xd3i#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            margin: 100px 500px;
        }

        .box span {
            position: absolute;
            top: 0px;
            width: 20px;
            height: 20px;
            font-family: 'icomoon';
            font-size: 10px;
            text-align: center;
            padding-top: 2.5px;
            color: #ccc;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        .box span:hover {
            cursor: pointer;
        }

        .box1 {
            position: absolute;
            width: 200px;
            height: 230px;
            left: 20px;
            color: red;
            font-size: 20px;
            border: 1px solid #ccc;
            text-align: center;
        }

        .box1 p {
            margin: 10px 0;
        }

        .box1 img {
            width: 80%;

        }
    </style>
</head>

<body>
    <div class='box'>
        <span></span>
        <div class='box1'>
            <p>去领红包</p>
            <img src="./images/111.png" alt="">
        </div>
    </div>
    <script>
        // 获取元素
        var span = document.querySelector('span');
        var box = document.querySelector('.box');
        // 绑定事件
        span.onclick = function () {
            box.style.display = 'none';
        }
    </script>
</body>

</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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 250px;
            margin: 100px auto;
        }

        .box li {
            float: left;
            width: 24px;
            height: 24px;
            margin: 15px;
            background-image: url(./images/222.png);
            background-position: 0 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            var index = i * -44;
            lis[i].style.backgroundPosition = '0 ' + index + 'px';
        }
    </script>
</body>

</html>

五、使用className修改样式属性

简单来说就是 先定义css样式, 当事件被触发的时候, 把要修改的元素的类名变成 定义css样式的类名.

className 会直接更改元素的类名, 会覆盖原先的类名.

<!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>Document</title>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .change {
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var text = document.querySelector('div');
        text.onclick = function () {
            text.className = 'change';
        }
    </script>
</body>

</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>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?67ioew');
            src: url('fonts/icomoon.eot?67ioew#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?67ioew') format('truetype'),
                url('fonts/icomoon.woff?67ioew') format('woff'),
                url('fonts/icomoon.svg?67ioew#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .box {
            font-size: 12px;
            margin: 100px 300px;
        }


        .box dl dt {
            width: 77px;
            height: 43px;
            line-height: 43px;
            text-align: center;
        }

        .box dl dt:hover {
            background-color: #FCFCFC;
            color: #FF8400;
        }

        .dds {
            display: none;
        }

        .box dl dd {
            width: 77px;
            height: 35px;
            border: 1px solid #FF8400;
            border-top: 0;
            box-sizing: border-box;
            line-height: 35px;
            text-align: center;
            box-shadow: 2px 0px 3px #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <dl>
            <dt>微博</dt>
            <div class='dds'>
                <dd>私信</dd>
                <dd>评论</dd>
                <dd>@我</dd>
            </div>
        </dl>
    </div>
    <script>
        // 获取元素
        var dt = document.querySelector('dt');
        var dds = document.querySelector('.dds');
        dt.onmouseover = function () {
            dds.style.display = 'block';
        }
        dt.onmouseout = function () {
            dds.style.display = 'none';
        }
    </script>
</body>

</html>
学习中的小菜鸟.
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript style 样式属性操作
猿码互联
05-28 474
需要注意的是，使用 style 对象只能访问和修改内联样式属性，无法访问和修改外部样式表中定义的样式属性。如果要操作外部样式表中定义的样式属性，可以使用 getComputedStyle 方法来获取计算后的样式属性值，或者通过修改元素的 className 或 classList 属性来应用不同的样式类。要修改元素的样式属性值，可以使用 style 对象的属性赋值方式。要获取元素的样式属性值，可以使用 style 对象的属性访问方式。要动态修改样式属性，可以使用 style 对象的属性赋值方式。
DOM——操作元素属性
asdf1234dfty的博客
06-25 570
操作元素属性的方法以及注意事项
DOM简介+操作元素+修改样式+案例
phoebemeng的博客
07-13 571
DOM基础操作方法
JavaScript-操作元素样式属性
最新发布
qq_61897768的博客
04-23 97
JavaScript课后总结
【前端】JavaScript-操作元素
qq_45764950的博客
11-09 1006
所有元素全部清除样式给当前元素设置样式element.属性 //获取属性值（元素本身自带的属性）element.getAttribute('属性') //主要获取自定义的属性（标准）程序员自定义的属性element.属性='值' //设置内置属性值element.set Attribute('属性','值') //主要针对自定义属性自定义属性的目的：是为了保存和使用数据，有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取通过element.getAttribute('属性')
JavaScript-DOM-操作元素样式
十二的博客
04-24 642
JavaScript-DOM-操作元素样式
JavaScript----操作元素
鹿蹊zz的博客
06-28 258
操作元素的步骤： - 事件源：触发事件的元素（获取事件源）- 事件类型： 例如 click 点击事件（绑定事件）- 事件处理程序：事件触发后要执行的代码(函数形式)，事件处理函数一.改变元素内容（innerText 和 innerHTM） innerText 和 innerHTML的区别innerText 不识别html标准 非标准 去除空格和换行 1.通过Element.style.属性 改变元素宽度，高度，颜色，背景色等等............
08-操作元素之修改样式属性
qq_52031408的博客
04-22 67
操作元素之修改样式属性
09、JavaScript-DOM获取元素及修改属性
执手天涯@的博客
01-13 1080
1、Web Api基本认识 【作用】： 使用JavaScript去操作html和浏览器 【分类】： DOM ：文档对象模型 BOM ：浏览器对象模型 JavaScript结构图： 【什么是DOM】： DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API 【DOM树】： 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 DOM对象： 浏览器根据html标签生成的 JS对象。 所有的标签属性都可以在这个
JavaScript----操作元素,操作样式
你的小甜甜的博客
12-15 227
操作元素: 上一篇我们学习了如何获取页面的元素和如何注册事件,今天我们来学习一下后续----如何改变元素中的内容 JS中的DOM操作主要可以改变网页的内容、结构(标签)、样式。可以使用DOM操作元素来改变元素里面的内容、属性等，同样这些操作针对于DOM而言也是通过操作对象的属性来实现的 1.对于文本框来说,文本内容属于value的值 HTML: <input type="text" value="请输入一个内容" id="txt"> JavaScript: <-- 获取元素后,为元素添加
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
10-24
在Web开发中，JavaScript与CSS的结合是构建动态和...因此，掌握如何通过JavaScript获取和操作伪元素的属性是一项非常实用的技能。在实际开发中，确保测试代码在目标浏览器上的兼容性，以确保在各种环境下都能正常工作。
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
10-20
每个HTML元素在DOM中都表现为一个对象，这些对象可以被JavaScript访问和操作。例如，`document`对象是整个HTML页面的根节点，而`getElementById`方法就是通过DOM接口来查找具有特定ID的元素。 在示例代码中，首先...
JavaScript改变HTML元素的样式改变CSS及元素属性
10-26
改变CSS及元素属性的方法有很多，在本文将为大家介绍下使用js是如何做到的，感兴趣的朋友可以感受下
javascript获取作用在元素上面的样式属性代码
10-27
在JavaScript中，获取元素的样式属性是一个常见的任务，特别是在进行前端开发时，我们可能需要动态地检查或修改元素的外观。本话题将深入探讨如何利用JavaScript获取应用在元素上的样式属性，以及处理不同浏览器间...
javaScript 读取和设置文档元素的样式属性
12-10
在网页开发中，JavaScript 用于操作HTML元素，包括读取和设置文档元素的样式属性，这使得网页可以动态响应用户的交互。 样式属性分为三种类型： 1. **内联样式**：这是通过在HTML元素的`style`属性中直接设置样式，...
JavaScript - 操作元素 - 获取自定义属性值
qq_33962481的博客
06-22 7382
文章目录一、定义属性的操作1.获取属性值2.设置元素属性值3. 移除属性 一、定义属性的操作 二 选项卡案例 三 h5自定义属性
JS数组中的方法
qq_33962481的博客
03-24 3850
js数组的方法
JavaScript - 操作元素 - 节点操作 - 复制节点
qq_33962481的博客
06-23 2389
文章目录一、复制节点二、添加节点 一、复制节点 语法 : node.cloneNode() 返回调用该方法的节点的一个副本. 如果括号参数为空或者为false, 则是浅拷贝, 即只克隆复制节点本身, 不克隆里面的子节点. 如果括号参数为true, 则是深拷贝, 克隆复制节点本身和里面的子节点. 二、添加节点 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值