PHP编程在线学习平台, 提供PHP教程、PHP入门教程、PHP视频教程及源码下载

网站首页 > 文章精选 正文

Js基础8:常见内容操作

xinche 2025-01-20 17:20:58 文章精选 4 ℃ 0 评论

1、文本内容修改

语法:

 element.innerHTML = '<p>xxx</p>'  //向一个元素中插入一段 HTML
 element.innerText = 'xxx'         //修改元素的显示文本内容

2、css样式修改

语法:

 element.style.backgroundColor = "red";

修改多个样式:

 // 思路:将多个样式写成对象的形式作为参数,传递给一个函数
 var obox = document.getElementById("box");
 // 函数封装
 function setCss(ele, css) {
     for (var key in css) {
         ele.style[key] = css[key];
    }
 }
 // 调用函数,传递参数
 setCss(obox, {
     width: "300px",
     height: "300px",
     backgroundColor: "red"
 })

3、非表单元素的属性修改

所谓表单元素,就是可以放在form表单标签中存储用户输入的数据的标签,如 input、select标签,而非表单元素就是只能展示数据,不能存储用户输入的数据 的标签,如 a、img标签。

常用的非表单元素属性有 href、title、id、src、className,使用DOM对象操作属性,常用操作有 使用元素获取属性值,以及使用元素修改属性值。以下以a、img标签为例。

语法:

 element.属性 = 'xxx';

需求:点击按钮修改a标签的地址和文本显示

 var btn = document.getElementById("btn");
 btn.onclick = function () {
     var aObj = document.getElementById("ak");
     //根据id获取超链接,设置href属性
     aObj.href = "http://www.wolfcode.cn";
     //根据id获取超链接,设置文字内容
     aObj.innerText ="叩丁狼";
 }

需求:点击按钮修改图片的title属性

 <input type="button" value="显示效果" id="btn">
 <img src="images/cangjingkong.jpg" alt="" title="嘎嘎">
 <script>
     var btn = document.getElementById("btn");
     btn.onclick = function () {
         var imgObjs = document.getElementsByTagName("img");
         imgObjs[0].title = "哈哈";
    }
 </script>


为多个元素绑定事件(this)

需求:点击按钮设置多个p标签的文字内容

 var btn = document.getElementById("btn");//获取id为btn的元素
 btn.onclick = function () {
    //根据标签名字获取标签
    var pObjs = document.getElementsByTagName("p");
    //无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组
    console.log(pObjs);
    //循环遍历这个数组
    for(var i =0; i < pObjs.length; i++){
       //每个p标签,设置文字
       pObjs[i].innerText = "我们都是P标签";
    }
 };

需求:点击不同的按钮,p标签展示对应按钮的内容

 var btn = document.getElementsByTagName("button");
 var op = document.getElementsByTagName("p")[0];
 // 获取到的按钮是一个数组,不能直接绑定事件
 console.log(btn);
 // 遍历这个数组 挨个绑定事件
 for (var i = 0; i < btn.length; i++) {
     btn[i].onclick = function () {
         // this指向是就是事件源
         var text = this.innerText;
         console.log(text);
         op.innerText = '点击了' + text;
    }
 }

排他思想案例:点击当前按钮高亮显示,其他同级按钮取消高亮显示

 var btn = document.getElementsByTagName("button");
 for(var i=0;i<btn.length;i++){
     btn[i].onclick = function(){
         // 1.先处理所有元素,做初始化操作
         for(var j = 0;j<btn.length;j++){
             btn[j].style.background = "none";
        }
         // 2.再修改当前元素
         this.style.background = "#cfc";
    }
 }

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

请填写验证码
最近发表
标签列表
最新留言