|
阅读：2847回复：0
操作元素及案例 2023.1.16<body> <!-- <div style="height: 20px; width: 80px;background-color: red; cursor: pointer;">我被选中了</div> --> <!-- <button>显示系统事件</button> <div>某个时间</div> <p>123</p> --> <!-- <button id="tu1">图片1</button> <button id="tu2">图片2</button> <img src="../../../一阶段/64.jpg" alt="alt 图片错误"> --> <!-- <img src="../../../作业/一阶段/2022.10.25高钰翔作业//乌鲁鲁和卡塔.jpg" alt="" /> <div>上午好</div> --> <!-- <div class="box"> <input type="password" name="" id="pwd" /> <p src="" alt="" class="iconfont icon-shouye" id="eye"></p> </div> --> <script> //执行事件步骤：点击div 控制台输出 我被选中了 // 1、获取事件源 // let div =document.querySelector('div') // // 2、绑定事件 注册事件 div.onclick // // 3、添加事件处理程序 // div.onclick = function () { // console.log('我被选中了'); // } //操作元素 /* 1、改变元素内容 element.innerText:从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 element.innerHTML:起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行 W3C标准 */ // let btn = document.querySelector("button"); // let div = document.querySelector("div"); // btn.onclick = function () { // div.innerText = getDate(); // }; // function getDate() { // let date = new Date(); // let year = date.getFullYear(); // let month = date.getMonth() + 1; // let dates = date.getDate(); // let day = date.getDay(); // return "今天是" + year + "年" + month + "月" + dates + "日"; // } // // 元素不添加事件 // let p = document.querySelector("p"); // p.innerText = getDate(); // 操作元素-修改元素 // let tu1 = document.getElementById('tu1'); // let tu2 = document.getElementById("tu2"); // let img = document.querySelector("img"); // tu1.onclick = function(){ // img.src = "../../../一阶段/航母.jpg" // img.title = "航母图片" // } // tu2.onclick = function(){ // img.src = "../../../一阶段/640.jpg" // img.title = "天使图片" // } //案例 // let img = document.querySelector("img"); // let div = document.querySelector("div"); // let date = new Date(); // let h = date.getHours(); // if (h < 12) { // img.src = "../../../作业/一阶段/2022.10.25高钰翔作业/8D美景.jpg"; // div.innerHTML = "上午好"; // } else if (h < 18 && h > 12) { // img.src = "../../../作业/一阶段/2022.10.25高钰翔作业//乌鲁鲁和卡塔.jpg"; // div.innerHTML = "下午好"; // }else{ // div.innerHTML = "晚上好"; // } //仿京东显示密码的案例 //算法：利用一个flag变量，来判断flag的值，如果是1就是文本框，如果是0就是密码框，初始值设置为1 // let eye = document.getElementById("eye"); // let pwd = document.getElementById("pwd"); // let flag = 0; // eye.onclick = function () { // if (flag == 0) { // pwd.type = "text"; // eye.class = "iconfont icon-xiangxia"; // flag = 1; // } else { // pwd.type = "password"; // eye.class = "iconfont icon-xiangshang"; // flag = 0; // } // }; //样式属性操作 </script> </body> |
|
公众号
