前言:
当前各位老铁们对“请修改js或html”大体比较关怀,咱们都想要剖析一些“请修改js或html”的相关文章。那么小编在网上收集了一些关于“请修改js或html””的相关文章,希望朋友们能喜欢,咱们快快来学习一下吧!这里我想了想还是讲一些吧,算是一个基础的了解,在真实的工作中,我们更多的是用到后面的jquery去操作,这里只是简单讲一下,让大家了解,怕大家到jquery那里不明白。
我们以下操作都会使用以下的html的文件:
<html> <head> <title>js</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> <div id="container_id"> 我是div块 </div> <div class="container_class"> 我是div块1 </div> <div class="container_class"> 我是div块2 </div> </body> <script type="text/javascript" src="./index.js"> </script></html>js获取html中的内容
// 通过getElementId获取var dom = document.getElementById("container_id");console.log(dom.innerHTML);console.log(dom.innerText);// 通过getElementsByClassName获取var doms = document.getElementsByClassName("container_class");console.log(doms);console.log(doms[0].innerText);
注:
getElementById:是通过html元素的id属性来获取,由于id是唯一的,所以,会直接获取dom元素;
getElementsByClassName:是通过html元素的class属性来获取,由于class可以被多个html元素使用,所以,获取到的是一个数组。
获取到dom元素之后,我们就可以获取到dom元素内部的内容,innerHtml会获取到内部的包含html标签的内容,从上面的例子我们可以看出来;而innerText只会获取到内部的文本内容。
js更改html中的内容
上面既然能获取dom元素的内容,我们就能通过js来进行更改。
// 通过getElementId获取var dom = document.getElementById("container_id");console.log(dom.innerHTML);console.log(dom.innerText);// 通过getElementsByClassName获取var doms = document.getElementsByClassName("container_class");console.log(doms);console.log(doms[0].innerText);dom.innerHTML = "<div>我是新更改的</div>";//dom.innerText = "我是另外新更改的"; // 可以尝试看下输出效果
注:
要更改dom元素内部的内容,直接 dom元素.innerHtml = "想要赋的值就行";或者dom元素.innerText = "想要赋的值就行";
js更改html中的属性
var dom = document.getElementById("container_id");dom.setAttribute("style","color:red;background:blue");
注:以上代码我们通过setAttribute来给dom元素设置属性,这里我们设置了字体红色,背景蓝色。同样的你也可以添加其他属性。
js获取html中的属性
var dom = document.getElementById("container_id");dom.setAttribute("style","color:red;background:blue");var cssstyle = dom.getAttribute("style");console.log(cssstyle);var csscolor = dom.style.color;console.log(csscolor);
注:我们通过getAttribute获取了dom元素的style的属性值;
使用dom元素.style.属性 我们获取了对应的style中的颜色值;
标签: #请修改js或html