JavaScriptdom操作访问和修改元素示例代码资源-CSDN文库

共4个文件

html：4个

javascript

dom

需积分: 5 125 浏览量 2024-06-27 10:48:17 上传评论收藏 6KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

03dom_access_and_change.zip （4个子文件）

03style_access_and_change.html 3KB

04dom_acess.html 7KB

02content_access_and_change.html 1KB

01property_access_and_change.html 2KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM操作-访问和修改</title>  <script> // 1 访问属性 function getProperty(){ let obj = document.getElementById("baidu"); //获取超链接的href属性值 console.log(obj.href); //获取超链接的target属性值 console.log(obj.target); //获取指定对象的内容 let objs = document.getElementById("username"); console.log(objs.value); //获取指定对象的是否选中值，这里的checked返回的是false或ture，选中为true let obj3 = document.getElementById("male"); console.log(obj3.checked); //设置属性值 //将超链接百度的地址修改为别的，设置后刷新页面，点访问属性然后再点链接即可跳转到新的网址 obj.href = "https://blog.csdn.net/mo_sss"; //将跳转规则修改为当前页面跳转 obj.target = "_self"; //修改性别单选值的默认选项，将男性该位默认 obj3.checked = "true"; } // 2 访问内容 function getContent(){ var obj = document.getElementById("d11"); //获取指定标签的内容 //获取标签内的所有内容，包括标签、空格和换行符等 console.log(obj.innerHTML); //只获取标签内的文本内容 console.log(obj.innerText); //设置内容 //设置标签内的内容，使用innerTEXT只能设置文本内容 obj.innerText = "同居长干里，两小无嫌猜。"; console.log(obj.innerText); //设置标签内的内容，使用innerHTML可设置标签等特殊内容 obj.innerHTML = "<h2>朝如青丝暮成雪</h2>"; console.log(obj.innerHTML); } // 3 访问CSS function getStyle(){ var obj = document.getElementById("d22"); //获取CSS样式的宽度 console.log(obj.style.width); //获取CSS样式的字体大小，这里需要注意，样式的键带短杠的需要将短杠去掉将短杠后的首字母大写 console.log(obj.style.fontSize); //获取CSS样式的字体 console.log(obj.style.fontFamily); //获取CSS样式的左上角的半角像素 console.log(obj.style.borderTopLeftRadius); //设置CSS样式的值 obj.style.background = "lightgreen"; // console.log(obj.style.borderTopLeftRadius); //另一种访问CSS的方式，className方式，需要配合CSS样式标签<style> var obj2 = document.getElementById("d33"); //获取标签的class值 console.log(obj2.className); //设置样式标签中class属性的值，设置后，调用该函数后样式即可被修改，这里需要注意，对象没有标签中的class，需要使用className访问 obj2.className = "c11"; //获取CSS样式的宽度 console.log(obj2.style.width); } </script> <style> /* 原始的样式 */ .ccc{ background: brown; font-size: 30px; } /* 修改后的样式在函数中调用修改样式 */ .c11{ width: 150px; height: 20px; background: red; font-size: 10px; } </style> </head> <body>  <br><br><br>  <input type="button" value="访问属性" onclick="getProperty()"> <br>  <br> <a href="https://www.baidu.com" target="_blank" id="baidu">baidu</a> <br> username: <input type="text" name="username" id="username"> sex: <input type="radio" name="sex" value="male" id="male">男 <input type="radio" name="sex" value="female" id="female" checked>女 <br><br><br>  <br> <hr>  <input type="button" value="访问内容" onclick="getContent()"> <br><br><br> <div id="d11"> 高堂明镜悲白发 </div>  <br> <hr>  <input type="button" value="访问CSS" onclick="getStyle()"> <br><br><br> <div id="d22" style="width: 1000px; height: 40px; background: lightblue; font-size: 30px; font-family: 'Courier New', Courier, monospace;border-top-left-radius: 15px;"> 却下水晶帘，玲珑望秋月。 </div> <br><br><br>  <div id="d33" class="ccc"> 却下水晶帘，玲珑望秋月。 </div>    </body> </html>

评论收藏

内容反馈