JS里添加样式

JS里添加样式的方法：

1、首先，要创建标签，使用document.createElement函数，如图创建div标签。使用其className设置class，id设置id，style设置样式。

2、样式的设置也可以分项进行。如图是分项设置其left，top，display，position，width几个样式。

3、通过设置标签的innerHTML属性可以直接给其添加子标签以及子标签的样式。当然，也可以分项分层添加标签。

4、设置好标签（如图是div标签，变量名box），使用document.body.appendChild添加标签到body当中。

5、标签添加以后，依然可以修改样式，如图是使用document.getElementById方法根据id获取标签，修改style。

6、标签添加以后，也可以给其添加和删除event处理。如图是使用jQuery给id为img-preview-box的标签添加hover鼠标经过的处理。

/**

* 给定标签添加外标签

* @param {object | string} obj 一个标签元素，或者元素的id值

* @param {string} tag 外标签的名称，可以带上id值class值

*/

function setParent(obj,tag){

obj = typeof obj === "string" ? document.getElementById(obj) : obj

//判断obj是否为有效元素对象

if(obj &&obj.nodeType){

if(obj.nodeType !== 1){

alert("无效的元素对象！")

return false

}

}else{

alert("无效的元素对象！")

return false

}

//如果没有设置tag，或者省略了标签名称，则默认为div

tag = tag ? (/^(#|\.)/gim.test(tag) ? ("div"+tag) : tag) : "div"

var id = "",

cname = "",

len = tag.length,

i = 0,

tn = "",

isT = true,

str = "",

relTag = ""//用来保存标签

//获取id值，获取class值,这一部分参考zencoding的写法

while(i<len){

str = tag.charAt(i)

switch(str){

case "#"://id

id = tag.substring(i+1).match(/^[\w\-:\$]+/i)

id = id ? id[0] : ""

i += id.length + 1

isT = false

break

case "."://class

tn = tag.substring(i+1).match(/^[\w\-:\$]+/i)

tn = tn ? tn[0] : ""

i += tn.length + 1

cname += " " + tn

isT = false

break

default:

if(isT){

relTag += str

}

i++

}

}

//生成节点

tag = document.createElement(relTag)

tag.setAttribute("id",id)

tag.className = cname

//移动替换节点

tag.appendChild(obj.cloneNode(true))

obj.parentNode.replaceChild(tag,obj)

return obj

}

window.onload = function(){

//用法1：movediv为页面上的某个标签的id值，#my.base.case省略标签符号则默认标签为div

setParent("movediv","#my.base.case")

//用法2：可省略第二个参数值，默认外标签为div

setParent("movediv")

//用法3：movediv为页面上的某个标签的id值，h3#my.base.case表示外标签为h3，其id值为my，其class值为base case

setParent("movediv","h3#my.base.case")

//用法4：传入标签元素，其余用法类似上面的

setParent(document.getElementById("movediv"),"#my.base.case")

}

此函数的压缩版本如下(使用的是google的Closure Compiler)：

function setParent2(b,a){if((b="string"===typeof b?document.getElementById(b):b)&&b.nodeType){if(1!==b.nodeType)return alert("\u65e0\u6548\u7684\u5143\u7d20\u5bf9\u8c61\uff01"),!1}else return alert("\u65e0\u6548\u7684\u5143\u7d20\u5bf9\u8c61\uff01"),!1for(var a=a?/^(#|\.)/gim.test(a)?"div"+a:a:"div",e="",f="",i=a.length,c=0,d="",d=!0,g="",h=""c<i)switch(g=a.charAt(c),g){case "#":e=(e=a.substring(c+1).match(/^[\w\-:\$]+/i))?e[0]:""c+=e.length+1d=!1breakcase ".":d=(d=a.substring(c+1).match(/^[\w\-:\$]+/i))?

d[0]:""c+=d.length+1f+=" "+dd=!1breakdefault:d&&(h+=g),c++}a=document.createElement(h)a.setAttribute("id",e)a.className=fa.appendChild(b.cloneNode(!0))b.parentNode.replaceChild(a,b)return b}

js获取标签类函数：

方法一：.innerText

var x1 = document.getElementById("testid").innerText

alert("x1="+x1)

方法二：.innerHTML

var x2 = document.getElementById("testid").innerHTML

alert("x2="+x2)

---