但我们经常会听到js操作css或者脚本化css的说法，那是怎么回事呢？
其实，DOM中提供的方法能操作HTML的所有内容，其中包括能操作元素的属性，而元素的属性中又恰好包含style属性，style属性表示的是该元素行间样式，而且行间样式的权重是1000。所以一般我们通过DOM操作元素的属性style就间接的改变了该元素的CSS样式。
DOM操作CSS样式其实质是通过DOM控制行间样式，从而达到改变样式的效果。这只能说间接的操作CSS，并非真实的直接操作CSS文件
通过DOM元素的style读写CSS行间样式
格式：ele.style.prop
注：
1. 可读可写行间样式，没有兼容性问题
2. 碰到保留字属性，前面应添加css；例如：float-->cssFloat
3. 复合属性必须拆解
4. 组合单词变成小驼峰式
5. 写入的值必须是字符串格式
用法比较简单，我们深入看看style吧
先随便来两个元素，并选中
我们发现，dom元素的原型的原型都是HTMLElement。于是猜测，style就是定义在HTMLElement的原型链上，所以凡是DOM元素都有style属性。
通过hasOwnProperty进一步验证看看是否就在HTMLElment的原型上
明白style定义在哪里之后，再来看style里面是什么？
目前也只有这种方式能修改CSS样式。
下面再来了解查询样式的方式：
window.getComputedStyle(ele,null)
IE使用另外一直方式代替
ele.currentStyle
最后我们封装一个所有浏览器都能用的方法：
本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考，具体如下： 介绍 DOM是Document Object Modeule的缩写，一般来说，DOM操作分成3个方面。 1、DOM Core DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它，用途也远不止仅限于网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML。 例如：document,getElementsByTagName("form")//使用DOM Core来获取表单对象的方法。 2、HTML-DOM 在使用Javascript和DOM为HTML文件编写脚本时，有许多属于HTML-DOM的属性，HTML-DOM的出现甚至比DOM Core还要早，他提供了一些更简明的记号来描述各种HTML元素的属性。 例如：复制代码 代码如下:document.forms //HTML-DOM提供了一个forms对象。 PS:可以看出，获取对象、属性即可以用DOM Core来实现民，也可以用HTML-DOM实现。 3、CSS-DOM CSS-DOM是针对CSS的操作,在javascript中，CSS-DOM主要的作用是获取和设置style对象的各种属性，由此达到网页呈现出各种不同的效果. 例如：复制代码 代码如下:element.style.color="red"//设置某元素的字体颜色的方法。 常用方法 1.查找元素节点 复制代码 代码如下:var $li = $("ul li:eq(0)")//获取ul标记下的第一个li,也可以写成 $("#ulID li:eq(0)") 2.查找元素属性 利用jquery的attr()方法来获取元素的各种属性的值，attr()方法的参数可以是一个，也可以是两个。 当参数是一个时，则是要查询的属性名称。 当参数是两个时，则可以设置属性的值。 alert($("#id").attr("title"))//输出元素的title属性.一个参数 $("#id").attr("title","改变title值")//改变元素的title属性值.二个参数3.添加元素节点 $(html) 简单说明一下$(html)方法会根据传入的html标记字符串创建一个dom对象，并将这个dom对象包装成一个jquery对象返回，总之就是把标记所有html代码都放到$()工厂里面就行了！ 例： var $htmlLi = $(" <li title='香蕉'>香蕉</li>")//创建DOM对象 var $ul = $("ul") //获取UL对象 $ul.append($htmlLi)//将$htmlLi追加到$ul元素的li列表下面列出部分插入节点的方法 方法描述示例Append()向每个匹配的元素内追加内容HTML代码<ul></ul>JQuery代码$(“ul”).append(“<li>AA</li>”)结果<ul><li>AA</li></ul> appendTo()该方法和Append()相反，a.Append(b)是将b追加到a中，而appendTo()是将b追求到a中HTML代码<ul></ul>JQuery代码$ (“<li>AA</li>”).appendTo (“ul”).结果<ul><li>AA</li></ul> Prepend()向每个匹配的元素内部前置内容HTML代码<p>哈哈</p>JQuery代码$(“p”).prepend(“<b>ABC</b>”)结果<p><b>ABC</b>哈哈</p>prependTo()该方法和Prepend()相反，a. Prepend (b)是将b前置到a中，而prependTo ()是将b前置到a中HTML代码<p>哈哈</p>JQuery代码$(“<b>ABC</b>”).prependTo.(“p”)结果<p><b>ABC</b>哈哈</p>After()在每个匹配的元素之后插入内容，是之后HTML代码<p>AAA</p>JQuery代码$(“p”).After(“<b>cc</b>”)结果<p>AAA</p><b>cc</b>insertAfter()和After()相反HTML代码<p>AAA</p>JQuery代码$ (“<b>cc</b>”).After(“p”)结果<p>AAA</p><b>cc</b>Before()在每个匹配的元素之前插入内容HTML代码<p>AAA</p>JQuery代码$(“p”). Before (“<b>cc</b>”)结果<b>cc</b><p>AAA</p>insertBefore()和Before()相反HTML代码<p>AAA</p>JQuery代码$ (“<b>cc</b>”). insertBefore (“p”)结果<b>cc</b><p>AAA</p> 好了，不要斋看，自己动手试试吧:) 4.删除元素节点 由于我们需要经常动态去改变DOM元素，因此Jquery提供了两种删除节点的方法，即remove()和empty() 4.1 remove()方法 $("p").remove()// 我们可以获取到要删除的元素，然后调用remove()方法 $("ul li:eq(0)").remove().appendTo("ul")// 删除ul下面的第一个li标记，然后再把删除的li标记重新加到ul里面，remove()方法返回删除元素的引用，这时你可以继续使用 $("ul li").remove("li[title!=ABC]")//remove可以接受通过参数来选择性的删除符合条件的元素 4.2 empty()方法 严格来讲，empty()方法并不是删除元素，而是清空 例： HTML代码： <ul> <li title="AAA">AAA</li> </ul> JQuery代码： 复制代码 代码如下:$("ul li:eq(0)").empty() 结果 <ul> <li title="AAA"></li> </ul> 记住，只会清空内容，不会请空属性 更多关于jQuery操作DOM元素相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》 希望本文所述对大家jQuery程序设计有所帮助。
![[JavaScript]js中window.open新窗口怎么实现post方式的参数传递？](/aiimages/%5BJavaScript%5Djs%E4%B8%ADwindow.open%E6%96%B0%E7%AA%97%E5%8F%A3%E6%80%8E%E4%B9%88%E5%AE%9E%E7%8E%B0post%E6%96%B9%E5%BC%8F%E7%9A%84%E5%8F%82%E6%95%B0%E4%BC%A0%E9%80%92%EF%BC%9F.png)
