JavaScript操作元素，改变页面内容样式

最新推荐文章于 2022-12-21 20:08:12 发布
最新推荐文章于 2022-12-21 20:08:12 发布
阅读量893 收藏 2
点赞数 3
分类专栏： JavaScript 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/121587588
版权

JavaScript操作元素

1、操作表单元素属性

在这里插入图片描述

1.1、改变元素内容

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>123</p>
    <script>
        // 1、当我们点击了安妮 div里面的文字会发生变化
        // (1)、获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // (2)、注册事件
        btn.onclick = function(){
            div.innerText = getDate();
        }

        function getDate(){
            // 案例：获取当前系统时间 2021年11月24日 星期三
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var dates = date.getDate();
            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day = date.getDay();
            return '今天是:' + year + '年' + month + '月' + dates + '日 '+ arr[day];
        }

        // 2、可以不用注册事件就显示事件
        var p = document.querySelector('p');
        p.innerHTML = getDate();
    </script>
</body>
</html>

1.2、innerText和innerHtml的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText和ineerHtml的区别
        // 1、innerText不识别html标签、innerHtml识别html标签
        var div= document.querySelector('div');
        div.innerText = '<strong>今天是：</strong>2021';
        // innerHtml识别html标签 W3C标准
        // div.innerHTML = '<strong>今天是：</strong>2021';

        // 2、这两个属性是可读写的 可以获取元素里面的内容
        var p = div.innerHTML = document.querySelector('p');
        // innerText会去除空格和换行
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>
</html>

1.3、操作元素 修改元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="ldh">刘德华</button>
    <button id='zxy'>张学友</button>
    <img src='images/ldh.jpg' alt="" title="刘德华">

    <script>
        // 修改元素属性 src
        // 1、获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2、注册事件 处理程序
        zxy.onclick = function(){
            img.src = 'images/zxy.jpg';
            img.title = "张学友";
        }
        ldh.onclick = function(){
            img.src = 'images/ldh.jpg';
            img.title="刘德华";
        }
    </script>
</body>
</html>

1.4、分时显示时间案例

<!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>
        img{
            width: 300px;
        }
    </style>
</head>
<body>
    <img src = "images/s.gif" alt="">
    <div id="div">亲，上午好，好好写代码</div>
    <script>
        var img = document.querySelector('img');
        var div = document.getElementById('div');

        // 获取当前系统时间
        var time = new Date();
        var h = time.getHours();
        if(h < 12){
            img.src = 'images/s.gif';
            div.innerHTML = "亲，上午好，快去写代码";
        }else if(h < 18){
            img.src = 'images/x.gif';
            div.innerHTML = "亲，下午好，快去写代码";
        }else{
            img.src = 'images/w.gif';
            div.innerHTML = "亲，晚上好，快去写代码";
        }
    </script>
</body>
</html>

1.4、表单的属性操作

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <input type="text" value="输入内容"/>
    <script>
        // 1、获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2、注册事件 处理程序
        btn.onclick = function(){
            // input.innerHTML = '点击了';这个是 普通合资 比如div 标签里面的内容
            // 表单里面的值 文字内容是通过  value  来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击disabled 我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者
        }
    </script> 
</body>
</html>

1.5、仿京东隐藏显示密码操作

<!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 {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img {
            position: absolute;
            top: 5px;
            right: 7px;
            width: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" id="eye">
        </label>
        <input type="password" name="" id="pwd"></input>
    </div>
    <script>
        // 1、获取元素
        var eye= document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2、注册事件 处理程序
        var flag = 0;
        eye.onclick = function(){
            // 点击一次后 flag一定要操作
            if(flag == 0){
                pwd.type = 'text';
                eye.src="images/open.png";
                flag = 1; //赋值操作
            }else{
                pwd.type='password';
                eye.src="images/close.png";
                flag = 0;
            }
        }
        
    </script>
</body>
</html>

在这里插入图片描述

1.6、样式属性操作

在这里插入图片描述

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 1、获取元素
        var div = document.querySelector('div');
        // 2、注册事件 处理程序
        div.onclick = function() {
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>
</html>

1.7、显示隐藏二维码

重点：修改display:none
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class = "close-btn"  style="display: block;">
        <img src = "images/ewm.png" id="img">
    </div>
    <script>
        // 1、获取元素
        var btn = document.querySelector('.close-btn');
        var img = document.querySelector('img');
        // 2、注册事件 程序处理
        btn.onclick = function(){
            btn.style.display = 'none';
        }
    </script>
</body>
</html>

1.8、表单事件获得焦点onfocus、失去焦点onblur

获得焦点onfocus：里面文字颜色变深
失去焦点onblur：文本框文字颜色变浅

<!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>
        input {
            color: #999;
        }
    </style>
</head>
<body>
    <input type="text" value="手机"></input>
    <script>
        // 1、获取页面的input元素
        var text = document.querySelector('input');
        // 2、注册事件 获得焦点事件 onfocus
        text.onfocus = function(){
            // console.log('获得了焦点');
            if(this.value === '手机'){
                this.value = '';
            }
            // 获得焦点需要把文本框里面的文字yanse变黑
            this.style.color = '#333';
        }
        // 3、注册事件 失去焦点事件 onblur
        text.onblur = function() {
            // console.log("失去了焦点");
            if(this.value === ''){
                this.value = '手机';
            }
            // 失去焦点需要把文本框里面的文字颜色变浅
            this.style.color = '#999';
        }

    </script>
</body>
</html>

2、操作元素样式属性

在这里插入图片描述在这里插入图片描述

即可以将对元素样式的操作放到一个类里面

<!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>
        div{
           width: 100px;
           height: 100px;
           background-color: pink;
        }
        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="first">文本</div>
    <script>
        // 1、使用element.style修改元素样式 如果样式较少 或者功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function(){
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = "25px";
            // this.style.marginTop = '100px';

            // 2、我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // this.className = 'change';
            
            // 3、如果我们想要保留原先的类名，我们可以这么做 多类名选择器
            this.className = 'first change';
            
        }
    </script>
</body>
</html>

2.1密码框验证提示信息

<!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>
        div{
            width: 600px;
            margin: 100px auto;
        }
        .message {
            display: inline-block;
            font-size: 12px;
            color:#999;
            /* background: url(images/mess.png) no-repeat center; */
            padding-left: 20px;
        }
        .wrong{
            color:red;
            /* background-image: url(images/wrong.png); */
        }
        .right{
            color:green;
            /* background-image: url(images/right.png); */
        }
    </style>
</head>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        // 1、获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        // 2、注册事件 失去焦点
        ipt.onblur = function(){
            // 根据表单藜麦值的长度 ipt.value.length
            if(this.value.length <6 || this.value.length > 16){
                message.className = 'message wrong';
                message.innerHTML = '请输入6~12位的数字'
            }else{
                message.className = 'message right';
                message.innerHTML = '合法'
            }
        }
    </script>
</body>
</html>

3、操作元素总结

在这里插入图片描述

小码哥呀
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android webview注入JS代码 修改网页内容操作
08-19
主要介绍了Android webview注入JS代码 修改网页内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js 修改页面样式
yteasyhappy的专栏
06-10 454
window.onload = function () { // alert(config.seat); var footer_float_400_fore2 = document.getElementById('footer_float_400_fore2'); var footer_float_400_flbar_w = document.getElementById('footer
js中修改页面的样式
小白的博客
12-28 2550
var obj = document.getElementById("fontColor");    obj.style.cssText = "color:black; ";    var obj1 = document.getElementById("fontColor1");    obj1.style.cssText = "color: #FF5E65;border: 0px soli
通过js修改网页内容
weixin_34391854的博客
03-01 2243
js可以通过文本所在标签的id获取该标签对象，然后修改其内容，如： document.getElementById('标签id').innerHTML = '要修改的文本内容'; 该方法可以在要修改的文本内容中加html标签，如果只是纯文本的话， 可以使用innerText, document.getElementById('标签id').innerText= '要修改的文...
JS 操作页面元素
qq_41370110的博客
04-21 243
在webdriver中主要用来解决点击无法生效问题代码如下： from selenium import webdriver from selenium.common.exceptions import WebDriverException import unittest import traceback import time class TestDemo(unittest.Test...
JavaScript动态改变HTML页面元素例如添加或删除
12-04
可以通过JavaScript动态的改变HTML中的元素 向HTML中添加元素 首先需要创建一个标签，然后向该标签中添加相应的内容，然后将创建好的标签添加到相应的位置。 <!DOCTYPE ...
Javascript简单改变表单元素背景的方法
10-23
主要介绍了Javascript简单改变表单元素背景的方法,涉及javascript操作页面元素样式的基本技巧,非常简单实用,需要的朋友可以参考下
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
10-23
主要介绍了JavaScript实现点击单选按钮改变输入框中文本域内容的方法,涉及javascript单选按钮控制页面元素样式的相关技巧,非常简单实用,需要的朋友可以参考下
JQuery操作元素的css样式
01-19
我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元 素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能...
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
11-27
本文实例讲述了JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法。分享给大家供大家参考，具体如下： 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被...
网页js脚本注入，可执行任意代码。
11-01
网页js脚本注入，可执行任意代码。这里有个实例教程，通过注入实现跳过验证码。
JavaScript改变内容、属性、样式 (CSS)、元素
weixin_45069151的博客
03-18 423
这里写自定义目录标题JavaScript 能够改变 HTML 内容JavaScript 能够改变 HTML 属性JavaScript 能够改变 HTML 样式 (CSS)JavaScript 能够隐藏 HTML 元素 JavaScript 能够改变 HTML 内容 getElementById() 是多个 JavaScript HTML 方法之一。 本例使用该方法来“查找” id=“demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”： 亲自试一试
JS操作网页元素集合
如线流萤的博客
10-24 589
JS操作动态生成的table中td的内容 获取xyz中的内容 问题摘要：在gridview中，操作其动态生成的某一行元素。给每一行绑定了一个事件AddLayers(this),这个事件需要读取改行的一个hidden元素&amp;amp;lt;td&amp;amp;gt;xyz&amp;amp;lt;td&amp;amp;gt;中的内容。我的网页文件如下： &amp;amp;lt;table cellspacing=&amp;quot;0&am
使用javaScript操作页面元素
dianyu1876的博客
03-17 116
from selenium import webdriver import time import unittest from selenium.common.exceptions import WebDriverException import traceback class javaSciptWebdriver(unittest.TestCase): # ...
javascript如何操作页面元素
weilaaer的博客
12-21 1194
要操作页面元素首先要获取页面内元素，获取到元素后，我们就可以对元素进行各种各样的操作，例如改变元素的文字，修改元素的内置属性等等。
JS操作元素
Raccon_的博客
12-13 997
操作元素 js操作元素修改的是行内样式，优先级较高 this指向 this指向的是事件函数的调用者 改变元素内容 element.innerText='' 获取元素从开始到终止位置的内容，去除标签，同时空格和换行也会去掉 element.innerHTML='' 获取元素从开始到终止位置的内容，包括标签，同时保留空格和换行 这两个属性都是可读写的，可以获取元素内的内容 改变元素属性 获取元素后，修改对象内相应的属性src、href、id、alt、title等 1.获取属性值 element.属
Checkbox全选反选
weixin_43332393的博客
09-27 1108
</tbody> </table> </div> <script> // 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮 var j_tbs = documen...
JS 根据屏幕分辨率或屏幕宽度分别设置不同的样式
grootbaby
02-15 2640
//判断屏幕高度，根据屏幕高度设置样式 var body_height=$(window).height(); if(body_height &gt; 800){ $(".index_main").addClass('body_height'); }else{ $(".index_main").removeClass('body_heigh...
JavaScript 使用js修改页面元素
路宇的博客
12-19 3951
下面我们通过使用js来修改p标签内文字的内容： HTML如下： <div style="margin: 20px 0"> <button id="showTime">显示当前时间</button> </div> <div id="time">2021-12-19</div> 之后通过js来修改id=“time” div中的元素，代码如下： var showTime = document.qu
在web页面实现动态增加、删除元素，改变元素CSS样式
最新发布
06-09
要在 Web 页面上实现动态增加、删除元素，以及改变元素的 CSS 样式，可以使用 jQuery 来实现。以下是一些示例代码： 1. 动态增加元素 使用 `append()` 方法可以向页面中添加新元素。例如，要向 id 为 "container" ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值