js DOM 节点树设置 style 样式属性

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <meta charset="utf-8" />

 </head>

 <body>

     <ul>

         <li id="html">html</li>

         <li id="css">css</li><li id="js">js</li>

     </ul>

     <script type="text/javascript">

         //访问指定元素

         var html = document.getElementById("html"); //通过ID获取对象

         html.style.fontWeight = "bold";//改变元素的样式

         var arr = document.getElementsByTagName("li"); //通过标签获取对象的集合

         alert(arr.length); //共有3个

     </script>

     <script type="text/javascript">

         //访问相关的元素

         var elm = document.lastChild; //获取文档的最后一个子节点(html)标记

         document.write(elm.nodeName + "<br/>");

         var body = elm.lastChild; //获取(html)的(最后一个子节点)body标记

         document.write(body.nodeName + "<br/>"); //最后一个子节点

         var head = elm.firstChild;//获取(html)的(第一个子节点)head标记

         document.write(head.nodeName + "<br/>"); //第一个子节点

         var ul = body.childNodes[1]; //获取(body)的子节点数组 ul标记

         document.write(ul.nodeName+"<br/>");//数组第1个元素的名字

         var li1 = ul.childNodes[1]; //获取ul下的子节点数组第一个 li标记

         document.write(li1.nodeName + "<br/>");//数组第1个元素的名字

         var text1 = li1.nextSibling; //获取li1后一个兄弟节点

         document.write(text1.nextSibling.nodeName + "<br/>");//数组第个元素的名字 li   //li与li之间必须紧挨着 否则未定义

         //默认把换行当成元素; 两次获取兄弟元素

     </script>

     <div id="div1"></div>

     <script type="text/javascript">

         //追加元素

         var div1 = document.getElementById("div1");//当前节点

         var newH1 = document.createElement("h1");//创建元素节点(h1标签)

         var newText = document.createTextNode("abcdefghijk");//创建文本节点

         newH1.appendChild(newText);//将文本节点添加到 (h1中)

         div1.appendChild(newH1); //将新建元素节点添加到<div>中 (作为最后一个节点)

     </script>

     <div id="div2">

         <p id="p1">段落1</p>

         <p id="p2">段落2</p>

     </div>

     <script type="text/javascript">

         //插入元素

         var newPara = document.createElement("p");//创建元素节点

         var newText = document.createTextNode("新段落");

         newPara.appendChild(newText);//将文本节点添加到 p中

         var myDiv = document.getElementById("div2"); //获取父节点

         var para2 = document.getElementById("p2"); //指定插入位置的节点

         myDiv.insertBefore(newPara, para2);//插入指定节点值前 (p2前)

     </script>

     <div id="div3">

         <p id="p11">段落11</p>

         <p id="p12">段落12</p>

     </div>

     <script type="text/javascript">

         //替换元素

         var newH1 = document.createElement("h1"); //创建节点h1

         var newText = document.createTextNode("标题1");//创建文本节点

         newH1.appendChild(newText);//将文本节点添加到h1节点中

         var myDiv = document.getElementById("div3");//获取父节点

         var para1 = document.getElementById("p11"); //获取替换的节点

         myDiv.replaceChild(newH1,para1); //把段落p11替换为标题1

     </script>

     <div id="div4">

         <p id="p21">段落21</p>

         <p id="p22">段落22</p>

     </div>

     <script type="text/javascript">

         //删除子节点

         var myDiv = document.getElementById("div4");//获取父节点

         var para1 = document.getElementById("p21");//指定要删除的节点

         myDiv.removeChild(para1);//删除指定的子节点

     </script>

     <div id="div5"></div>

     <script type="text/javascript">

         //元素的属性与内容操作

         var myDiv = document.getElementById("div5");//获取元素对象

         myDiv.innerHTML = "<h1>asdfghjk<h1>";//设置元素里面的html内容

         myDiv.setAttribute("style","width:380px;height:80px;border:1px solid #000;"); //为元素设置新的属性

     </script>

     <div id="div6"></div>

     <div id="div7"></div>

     <script type="text/javascript">

         //style属性

         var myDiv = document.getElementById("div6");

         myDiv.style.width = "200px";

         myDiv.style.height = "50px";

         myDiv.style.border = "1px solid #000";//设置div6的样式

         var myDiv1 = document.getElementById("div7");

         myDiv1.style = "width:200px;height:50px;border:1px solid #000;background-color:#000"; //设置div7的样式

         //javascript不允许在属性或方法名称里使用连字符;例如background-Color; 因此需要调整书写格式backgroundColor;连字符后面用大写

     </script>

     <div id="div8"></div>

     <script type="text/javascript">

         //className属性

         var myDiv = document.getElementById("div8");//获取div8对象

         myDiv.className = "a"; //更改样式<div id="div8" class ="a"></div>

         myDiv.className = "b"; //更改样式<div id="div8" class ="b"></div>

     </script>

 </body>

 </html>

<script>

    (function () { document.getElementsByTagName("body")[].style.cssText = "overflow:hidden"; }) ();

</script>

js DOM 节点树设置 style 样式属性的更多相关文章

013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Vue 设置style样式
1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...
childNodes遍历DOM节点树
childNodes遍历DOM节点树 var s = ""; function travel(space,node) { if(node.tagName){ s += space ...
DOM节点树和元素树--深度遍历
我们在阅读JS高级程序设计的时候,提到了节点树的概念.比如说: elem.parentNode---找elem的父节点: elem.childNodes---找elem的所有的直接子节点: elem. ...
CSS如何设置列表样式属性
列表样式属性在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
CSS如何设置列表样式属性，看这篇文章就够用了
列表样式属性在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
JS DOM节点增删改查属性设置
一.节点操作增 createElement(name)创建元素 appendChild();将元素添加删获得要删除的元素获得它的父元素使用removeChild()方法删除改第一种方 ...
js | javascript获取和设置元素的属性
获取和设置元素的内容: var nv = document.getElementById("pid"); alert(nv.innerHTML); nv.innerHTML=&qu ...

随机推荐

暑假集训D16总结
考试日常爆炸= = T1 一看就是个树规,然而不会写方程= = T2 一看就是个分块,然而不会分= = T3 终于有点头绪,推了两个小时的30分部分分情况,然后打挂了= = 我玩个鬼啊其实听完,觉 ...
【无限滚动加载数据】—infinite-scroll插件的使用
网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...
nyoj_676_小明的求助_201312042142-2
小明的求助时间限制:2000 ms | 内存限制:65535 KB 难度:2 描述小明对数学很有兴趣,今天老师出了道作业题,让他求整数N的后M位,他瞬间感觉老师在作弄他, ...
机器学习1k近邻
自己一直学习计算机视觉方面的东西,现在想学习一下数据挖掘跟搜索引擎,自己基础也有点薄弱,看朱明的那本数据挖掘,只能片面的了解这个数据挖掘.不过最近有一本书机器学习实战,于是乎通过实战的形式了解一下基 ...
linux给文件或文件夹加入apache权限
系统环境:ubuntu11.10/apache2/php5.3.6 在LAMP环境中,測试一个简单的php文件上传功能时,发现/var/log/apache2/error.log中出现例如以下php警 ...
[转]supervisor 安装、配置、常用命令
原文: http://www.cnblogs.com/xueweihan/p/6195824.html ------------------------------------------------ ...
Android ListView 和 ScrollView 冲突问题
近期做一款APP,当中有一个类似微博的评论功能的界面,先是列出微博的正文内容和图片等.然后下边是评论. 一開始就想着用一个ScrollView把主要内容和评论区的ListView包起来.然后加入各个控 ...
ASP.NET MVC脚本及样式压缩
现在我用ASP.NET MVC4.0,发现它自带有脚本和样式压缩功能.不知道以前的版本有木有,没有深究.太棒了!以前我们还辛辛苦苦自己搞了一个压缩的东西.这再次说明,平庸程序员如我辈,应该把时间和精力 ...
Android 重写onBackPressed()方法遇到的问题
1.resultCode的值一直为0 问题描述:AActivity调用startActivityForResult()方法,启动BActivity,然后在BActivity的onBackPressed ...
P2932 [USACO09JAN]地震造成的破坏Earthquake Damage 爆搜
这题怎么这么水~~~本来以为挺难的一道题,结果随便一写就过了...本来还不知道损坏的牛棚算不算,结果不明不白就过了... 题干: 农夫John的农场遭受了一场地震.有一些牛棚遭到了损坏,但幸运地,所有 ...

js DOM 节点树 设置 style 样式属性

js DOM 节点树 设置 style 样式属性的更多相关文章

随机推荐

热门专题

js DOM 节点树设置 style 样式属性

js DOM 节点树设置 style 样式属性的更多相关文章