a)动态引入样式表文件:
function loadLink(url){
var link = document.createElement("link")
link.type = "text/css"
link.rel = "stylesheet"
link.href = url
var head = document.getElmentsByTagName("head"消念旅)[0]
head.appendChild(link)
}
b)嵌入式:
function insertStyles(){
var doc,cssCode=[],cssText
var len = arguments.length
var head,style,firstStyle
if(len == 1){
doc = document
cssCode.push(arguments[0])
}else if(len == 2){
doc = arguments[0]
cssCode.push(arguments[1])
}else{
alert("函数最多接收两个参数!")
}
head = doc.getElementsByTagName("head")[0]
styles= head.getElementsByTagName("style")
if(styles.length == 0){
if(doc.createStyleSheet){//ie
doc.createStyleSheet()
}else{//FF
var tempStyle = doc.createElement("style")
tempStyle.setAttibute("type","text/css")
head.appendChild(tempStyle)
}
}
firstStyle = styles[0]
cssText=cssCode.join("\n")
if(!+"\v1"){//opacity兼容
var str = cssText.match(/opacity:(\d?\.\d+)/)
if(str!=null){
cssText = cssText.replace(str[0],"filter:alpha(opacity="+pareFloat(str[1])*100+")")
}
}
if(firstStyle.styleSheet){
firstStyle.styleSheee.cssText += cssText
}else if(doc.getBoxObjectFor){
firstStyle.innerHTML += cssText
}else{
firstStyle.appendChild(doc.createTextNode(cssText))
}
}
c)行内式:
var addStyle=function (ele,str){
var s = ele.getAttribute("style"),styles
if(str &&typeof str === "string"){
if(!s){
ele.style.cssText = str
}else{
if(s == '[object]'){//IE6/7 e.getAttribute("style")返回[object]
s=ele.style.cssText
}
styles= trim(s).split("拿凳")
for (var i=0,len=styles.lengthi<leni++){
var style_i=trim(styles[i])
var attr=style_i.split(":")[0]
if(str.indexOf(attr)>-1){
styles[i]=""
}else{
styles[i]=style_i
}
}
ele.style.cssText= styles.join("")+""+str
}
}
}
d)导入式:
import "index.css"
*** 作CSS 类相关的方法:
var hasClass=function(ele,value){
var rclass = /[\n\t\r]/g,
value=" "+value+" "
return (ele.nodeType==1)&&(" "+ele.className+" ").replace(rclass," ").indexOf(value)>-1
}
var trim=function (val){
return val.replace(/(^\s+)|(\s+$)/g,"")
}
var addClass=function(ele,value){
var rspace = /\s+/,classNames,getClass
if(value&&typeof value === "string"){
classNames = value.split(rspace)
if(ele.nodeType === 1){
if(!ele.className &&classNames.length == 1){
ele.className = value
}else{
getClass = " "+ele.className+" "
for(var i=0,len=classNames.lengthi<len i++){
var cname=classNames[i]
if(!hasClass(ele,cname)){
getClass += cname+" "
}
}
ele.className = trim(getClass)
}
}
}
}
var removeClass=function(ele,value){
var rclass = /[\n\t\r]/g,classNames,getClass
if((value&&typeof value === "string")||value === undefined){
classNames = (value||"").split(rspace)
if(ele.nodeType === 1 &&ele.className){
if(value){//存在查找要移除的类
getClass = " "+ele.className+" ".replace(rclass," ")//左右空格,为了使类中各类间均等,方便后面替换
for(var i=0,len=classNames.lengthi<leni++){
getClass = getClass.replace(" "+classNames[i]+" "," ")
}
ele.className=trim(getClass)
}else{//不存在移除所有类
ele.className = ""
}
}
}
}
var toggleClass=function(ele,value){
if(typeof value === "string"){
if(hasClass(ele,value)){
removeClass(ele,value)
}else{
addClass(ele,value)
}
}
}
1、简单的方法,不管不顾,直接这样就可以:document.createStyleSheet().cssText
=
'标签{color:red'
+
//
这个注释只在当前JS中帮助理解,并不会写入CSS中
'width:300pxheight:150px}'
+
'.类名{……}'
+
'#ID们{……}'
//完活。我喜欢分号这样写,和指令书写的起始位置对齐比较好一点,尤其是后面有其它语句的时候。
2、完善一点的方法,防止重复添加,可以通过添加样式表ID并对其宽肢判断来实现:
if
(!document.styleSheets['要建立的样式表ID如theforever'])
{
//先检查要建立的样式表ID是否存在,防止重复添加
var
ss
=
document.createStyleSheet()
ss.owningElement.id
=
'要建立的样式表ID如theforever'
ss.cssText
=
'标签{display:inline-blockoverflow:hidden'
+
//
这个注释只在当前JS中帮助理解,并不会写入兄巧汪CSS中
'text-align:leftwidth:300pxheight:150px}'
+
'.类名{……}'
+
'#ID们{……}'
}
以上这篇用JavaScript动态建立或增加CSS样式表的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。羡仔
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)