ASP.NET &&&&最新内容
ASP.NET &&&&随机内容您当前的位置：&&&&&正文
js判断样式className同时增加class或删除class
function MyClass () {} MyClass.hasClassName = function(element, className) { if (!element) var elementClassName = element.classN if (elementClassName.length == 0) //用正则表达式判断多个class之间是否存在真正的class（前后空格的处理） if (elementClassName == className || elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
}; MyClass.addClassName = function(element, className) { if (!element) var elementClassName = element.classN if (elementClassName.length == 0) { element.className = elementClassN
} if (elementClassName == className || elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
element.className = elementClassName + " " + classN }; MyClass.removeClassName = function(element, className) { if (!element) var elementClassName = element.classN if (elementClassName.length == 0) if(elementClassName == className) { element.className = "";
} if (elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)"))) element.className = elementClassName.replace((new RegExp("(^|\\s)" + className + "(\\s|$)"))," "); }; --博才网
下页更精彩：
点击排行榜
〖〗链接地址：
js判断样式className同时增加class或删除class由网友原创或转发，若js判断样式className同时增加class或删除class侵犯到您的权益，请及时通知我们（QQ：），谢谢！
微信查看最新信息微信扫一扫或用微信搜索微信号：hbrc-com
安卓手机客户端更省流量手机扫描下载或者直接
猜你还喜欢的文章
热点文章排行榜
• 版权所有 Copyright 2011 All rights reserved.[转载]getElementsByClassName的用法&和&js获取class
因为IE浏览器不支持getElementsByClassName，所以你要自己写一个方法得到class
但是火狐浏览器知道getElementsByClassName，可以直接的用
&title&&/title&
&script type="text/javascript"&
window.onload = function () {
&&&&&&&&&&&
var tagName = getClass("div",
&&&&&&&&&&
//因为返回的是包含多个元素的数组，所以要遍历一下&&&&&&&&&&&
i = 0; i & tagName. i++)
&&&&&&&&&&&&&&&
tagName[i].innerHTML = "你好";
&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&
var tagName = getClass("div",
&&&&&&&&&&&
i = 0; i & tagName. i++) {
&&&&&&&&&&&&&&&
tagName[i].innerHTML = "ALL好";
&&&&&&&&&&&
function getClass(tagname, className)
{ //tagname指元素，className指class的值
&//判断浏览器是否支持getElementsByClassName，如果支持就直接的用&&&&&&&&&&&
if (document.getElementsByClassName)
&&&&&&&&&&&&&&&
getElementsByClassName(className);
&&&&&&&&&&&
&&&&&&&&&&&
//当浏览器不支持getElementsByClassName的时候用下面的方法&&&&&&&&&&&&&&&
var tagname =
document.getElementsByTagName_r(tagname);&
//获取指定元素&&&&&&&&&&&&&&&
var tagnameAll =
//这个数组用于存储所有符合条件的元素&&&&&&&&&&&&&&&
i = 0; i & tagname. i++)
//遍历获得的元素&&&&&&&&&&&&&&&&&&&
if (tagname[i].className == className)
//如果获得的元素中的class的值等于指定的类名，就赋值给tagnameAll&&&&&&&&&&&&&&&&&&&&&&&
tagnameAll[tagnameAll.length] = tagname[i];
&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
return tagnameA
&&&&&&&&&&&
class="a1"&&/div&
class="a1"&&/div&
class="a1"&&/div&
class="a1"&&/div&
class="a2"&&/div&
class="a2"&&/div&
class="a2"&&/div&
class="a2"&&/div&
我建议不要用上面的方法，用JQuery，可以省去很多的代码
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。javascript（10）
用JS控制CSS基本样式的方法
CSS code
.class1
{
width:10
background-color:
}
HTML code
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&
&HTML&
&HEAD&
&link rel="stylesheet" type="text/css" href="abc.css" /&
&TITLE& New Document &/TITLE&
&script&
window.onload=fnI
function fnInit(){
// 访问 styleSheet 中的一条规则, 将其 backgroundColor 改为蓝色。
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
oRule.style.backgroundColor="#0000FF";
}
&/script&
&/HEAD&
&BODY&
&div class="class1"&aaa&/div&
&/BODY&
&/HTML&
(2)
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&
&HTML&
&HEAD&
&TITLE& New Document &/TITLE&
&style type="text/css"&
&!--
#apDiv1 {
position:
width:399
height:195
z-index:1;
border:1px solid #000;
background-color:#CCCCCC;
}
--&
&/style&
&script&
window.onload = function(){
alert(document.getElementById('apDiv1').currentStyle.width)
}
&/script&
&/HEAD&
&BODY&
&div id="apDiv1"&aaa&/div&
&/BODY&
&/HTML&
还可以用&& document.styleSheets(i).href&& 可以知道当前页面中引用的每个css的文件！
另：CSS属性与JavaScript编码对照表
（一定要注意， 上次本人_何向阳，在使用js修改css的中margin-left属性时，总报"left"未定义，后来，找了好多资料，才发现在js中，margin-left的写法为:marginLeft，恍然大悟，希望遇到相同问题的朋友，谨慎对待。）
CSS与JS紧密配合，为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。
&&& 比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：JavaScript中style后面的属性应该是什么？
&script type="text/javascript"&&&
function imageOver(e) {&&
e.style.border="1px solid red";&&
function imageOut(e) {&&
e.style.borderWidth=0;&&
&img src="css.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" /&
&&& JavaScript CSS Style属性对照表
&&& 盒子标签和属性对照
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
border 　　border
border-bottom 　　borderBottom
border-bottom-color 　　borderBottomColor
border-bottom-style　　 borderBottomStyle
border-bottom-width 　　borderBottomWidth
border-color 　　borderColor
border-left 　　borderLeft
border-left-color 　　borderLeftColor
border-left-style 　　borderLeftStyle
border-left-width 　　borderLeftWidth
border-right 　　borderRight
border-right-color 　　borderRightColor
border-right-style 　　borderRightStyle
border-right-width 　　borderRightWidth
border-style 　　borderStyle
border-top 　　borderTop
border-top-color 　　borderTopColor
border-top-style 　　borderTopStyle
border-top-width 　　borderTopWidth
border-width 　　borderWidth
clear 　　clear
float　　 floatStyle
margin 　　margin
margin-bottom 　　marginBottom
margin-left 　　marginLeft
margin-right 　　marginRight
margin-top 　　marginTop
padding 　　padding
padding-bottom 　　paddingBottom
padding-left 　　paddingLeft
padding-right 　　paddingRight
padding-top　　 paddingTop
颜色和背景标签和属性对照
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
background 　　background
background-attachment 　　backgroundAttachment
background-color　　 backgroundColor
background-image 　　backgroundImage
background-position　　 backgroundPosition
background-repeat 　　backgroundRepeat
color 　　color
样式标签和属性对照
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
display 　　display
list-style-type　　 listStyleType
list-style-image 　　listStyleImage
list-style-position　　 listStylePosition
list-style　　 listStyle
white-space　　 whiteSpace
文字样式标签和属性对照
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
font　　 font
font-family　　 fontFamily
font-size　　 fontSize
font-style　　 fontStyle
font-variant　　 fontVariant
font-weight 　　fontWeight
文本标签和属性对照
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
letter-spacing　　 letterSpacing
line-break　　 lineBreak
line-height　　 lineHeight
text-align　　 textAlign
text-decoration 　　textDecoration
text-indent 　　textIndent
text-justify　　 textJustify
text-transform 　　textTransform
vertical-align　　 verticalAlign
obj.style方法，这个方法只能JS只能获取写在html标签中的写在style属性中的值（style="..."），看一下代码
XML/HTML代码
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&
&html xmlns="http://www.w3.org/1999/xhtml"&&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&
&title&JS获取CSS属性值&/title&&
&style type="text/css"&&
&!--
.ss{color:#}
--&&
&div id="css88" class="ss" style="width:200 height:200 background:#333333"&JS获取CSS属性值&/div&&
&script type="text/javascript"&&
alert(document.getElementById("css88").style.width);//200px&&
alert(document.getElementById("css88").style.color);//空白&&
&/script&&&&&&
&/html&
上面这个例子对id为"css88"的div设置了2种烦事的样式，包括style和外部样式class。
从alert出来的信息可以看到，document.getElementById("css88").style方法获取不到class为ss的属性和值。
那么这么样才能获取到class为ss的属性和值呢？
IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法。
网上一个比较方法是：
XML/HTML代码
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&
&html xmlns="http://www.w3.org/1999/xhtml"&&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&
&title&S获取CSS属性值&/title&&
&style type="text/css"&&
&!--
.ss{background: color:# width:200px}
--&&
&p id="qq" class="ss" &sdf&/p&&
&script type="text/javascript"&&
function GetCurrentStyle (obj, prop) {&&&&
if (obj.currentStyle) {&&&&&&&
return obj.currentStyle[prop];&&&&
else if (window.getComputedStyle) {&&&&&&&
propprop = prop.replace (/([A-Z])/g, "-$1");&&&&&&&&&&
propprop = prop.toLowerCase ();&&&&&&&
return document.defaultView.getComputedStyle (obj,null)[prop];&&&&
var dd=document.getElementById("qq");&&
alert(GetCurrentStyle(dd,"width"));&&
&/script&&
&/html&
当然，如果您是引用外部的css文件同样适用。
另：可以将上面的方法简化为
JavaScript代码
function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性&&
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];&&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：20191次
排名：千里之外
原创：93篇2010年8月 PHP大版内专家分月排行榜第二
2010年7月 PHP大版内专家分月排行榜第三
2010年8月 PHP大版内专家分月排行榜第二
2010年7月 PHP大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。