JS document内容及样式操作完整示例

2023-08-03 03:26:04 247

本文实例讲述了JSdocument内容及样式操作。分享给大家供大家参考，具体如下：



js-documnet元素内容和样式操作



//单标签属性操作
//固定属性的操作
functiontestOper1(){
//获取对象
varinp=document.getElementById("uname");
alert(inp.type+"::"+inp.name+"::"+inp.id+"::"+inp.value);//可以直接用.直接获取其内部属性
alert(tt);//不会报错，其会显示undefined
}
functiontestChange(){
//获取对象
varinp=document.getElementById("uname");
inp.type="button"//对获取的对象属性值进行修改
inp.value="古河渚";
alert(inp.value);//输出当前数据的value值，当没用上面的重新赋值，会输出用户输入的值，用户也可以直接改变文本value值
}
functiontestAdd(){
//获取对象
varinp=document.getElementById("uname");
inp.class="Animation";//在获取的对象添加属性
alert(inp.class);
}
functiontestClear(){
//获取对象
varinp=document.getElementById("uname");
inp.value="";//把获取的对象属性清空
alert(inp.value);
}
//自定义属性的操作
functiontestextra(){
//获取对象
varinp=document.getElementById("uname");
alert(inp.getAttribute("Animation"));
}
functiontestextra2(){
//获取对象
varinp=document.getElementById("uname");
inp.setAttribute("Animation","clannadafterstory");//把指定的元素属性进行修改
alert(inp.getAttribute("Animation"));//属性值变了，属性哦ing名没有变
}
functiontestextra3(){
//获取对象
varinp=document.getElementById("uname");//我们一般不会修改对象name值因为这是键值会与后台进行链接，也一般不改变id,因为我们一般用id来进行对象的获取
alert(inp.getAttribute("value"));//输出的是空，因为没有给value赋值，即使用户端输入也不行，用户端不能在这种方式下改变标签的固定属性值
inp.setAttribute("value","CLANNAD");
alert(inp.getAttribute("value"));//和以上的操作一个效果
}

//双标签内部属性测试
//对于那些用两个标签确定的，我们可以操作其内部的内容
//双标签的内容操作
functiontestOper2(){
//获取对象
vardiv01=document.getElementById("div01");
alert(div01.innerHTML);//innerHTML获取对象中的所有内容，包括其对象的标签
alert(div01.innerText);//innerText获取对象的文本内容
}
functiontsetChangeCssText(){
vardiv01=document.getElementById("div01");
div01.innerText="clannad世界第一"//单纯的打印全部的文本内容
alert(div01.innerText);
div01.innerText=div01.innerText+"そうです";//进行文档的拼接
alert(div01.innerText);
}
functiontsetChangeCssText(){
vardiv01=document.getElementById("div01");
div01.innerHTML="clannad世界第一"//HTML是类型的数据可以在显示的时候进行执行
alert(div01.innerText);
div01.innerHTML=div01.innerHTML+"そうです";//进行HTML数据的拼接
alert(div01.innerText);
}
//双标签的样式操作
//属性直接操作样式
functiontestCssOper(){
vardiv02=document.getElementById("div02");
div02.style.backgroundColor="red";//添加对象的背景颜色
div02.style.border="solid3pxpurple";//修改对象的边框属性
div02.style.backgroundColor=""//清空对象的背景颜色
}
//className方式操作样式
functiontestCssOper2(){
vardiv02=document.getElementById("div02");
alert(div02.className);//获取
div02.className="common2";//修改
//div02.className="";//清空
}


#div01{
width:200px;
height:200px;
border:solid2pxyellow;
}
#div02{
width:200px;
height:200px;
border:solid2pxcyan;
}
.common{
width:200px;
height:200px;
border:solid2pxcyan;
}
.common2{
width:200px;
height:200px;
border:solid2pxpurple;
}



js-documnet元素内容和样式操作
单标签操作







单标签测试




双标签测试









clannad赛高！

运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

JS document内容及样式操作完整示例

js-documnet元素内容和样式操作

单标签操作

热门推荐

随机推荐