CSS的样式分为三类：
内嵌样式：是写在Tag里面的，内嵌样式只对所有的Tag有效。
内部样式：是写在HTML的里面的，内部样式只对所在的网页有效。
外部样式表：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以css为后缀的CSS文件里，然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件。
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration])
currentStyle是IE浏览器的一个属性，返回的是CSS样式对象
element指JS获取的DOM对象
elementstyle //只能获取内嵌样式
elementcurrentStyle //IE浏览器获取非内嵌样式
windowgetComputedStyle(element,伪类) //非IE浏览器获取非内嵌样式
documentdefaultViewgetComputedStyle(element,伪类)//非IE浏览器获取非内嵌样式
注：Gecko 20 (Firefox 4 / Thunderbird 33 / SeaMonkey 21) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），现在可以省略这个参数。
下面的html中包含两种css样式，id为tag的div是内嵌样式，而id为test的div样式为内部样式
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="Yvette Lau">
<meta name="keywords" content="样式,元素,写在,属性,内嵌">
<meta name="description" content="CSS的样式分为三类： 内嵌样式：是写在Tag里面的，内嵌样式只对所有的Tag有效。 内部样式：是写在HTML的里面的，内部样式只对所在的网页有效。 外部样式表：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个">
<title>Document</title>
<style>
#test{
width:500px;
height:300px;
background-color:#CCC;
float:left;
}
</style>
</head>
<body>
<div id = "test"></div>
<div id = "tag" style = "width:500px; height:300px;background-color:pink;"></div>
</body>
</html><script type = "text/javascript">
windowonload = function(){
var test = documentgetElementById("test");
var tag = documentgetElementById("tag");
//CSS样式对象:CSS2Properties{},CSSStyleDeclaration
consolelog(teststyle); //火狐返回空对象CSS2Properties{}，谷歌返回空对象CSSStyleDeclaration{}
consolelog(tagstyle); //返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"}
//elementstyle获取的是内嵌式的style，如果不是内嵌式，则是一个空对象
consolelog(tagstylebackgroundColor);//pink
consolelog(tagstyle['background-color']);//pink
//获取类似background-color,border-radius,padding-left类似样式的两种写法啊
consolelog(testcurrentStyle) //火狐和谷歌为Undefined,IE返回CSS对象
consolelog(windowgetComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……} ，火狐返回CSS2Properties{……}
consolelog(windowgetComputedStyle(test))
//效果同上,但是在Gecko 20 (Firefox 4/Thunderbird 33/SeaMonkey 21) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null)
consolelog(testcurrentStylewidth);//500px(IE)
consolelog(windowgetComputedStyle(test)width); //500px;
consolelog(windowgetComputedStyle(test)['width']);//500px;
//documentdefaultViewgetComputedStyle(element,null)[attr]/windowgetComputedStyle(element,null)[attr]
}
</script>
思路：
1、引入JQuery，以便于应用选择器
2、用JQuery选择器，找到对应的div（如果这个div无规律，那就没办法了）
3、修改border样式
示例代码：
$('div',$("bc_block_td_AID_16714_first_col_td"))css('border-bottom','2px solid');//改成2px每个tr上都要有mouseover事件么
$("tr")each(function(){
$(this)mouseover(function(){
if($(this)attr("backgroud-color")length > 0 ){
alert($(this)attr("backgroud-color"));
}
});
});
<html>
<head>
<script language="javascript">
function chk(){
var UserName;
var Pwd;
UserName=documentgetElementById("Bcuser")value;
Pwd=documentgetElementById("Bcpass")value;
if (UserNamelength<=0){
documentgetElementById("landout")styledisplay="none";
documentgetElementById("landover")styledisplay="block";
}
else{
documentgetElementById("landout")styledisplay="block";
documentgetElementById("landover")styledisplay="none";
}
}
function a(){
alert(Date());
}
</script>
</head>
<!--style="display: none" 登陆-->
<div class="top4" id="landout" style="display: black">
<form action="indexasp" method="post">
<table>
<tr>
<td id="td2">用户名称：</td>
<td id="td3"><input name="Bcuser" type="text" maxlength="15" id="Bcuser"/></td>
<td id="td4"><input name="Normal" type="image" src="images/dljpg" /></td>
</tr>
<tr>
<td id="td2">用户密码：</td>
<td id="td3"><input name="Bcpass" type="password" maxlength="15" id="Bcpass"/></td>
<td id="basicModal"><input name="basic" type="image" src="images/zcjpg" /></td>
</tr>
<tr>
<td> <input type="button" value="提交" onclick="chk()"></td>
</tr>
</table>
</form>
</div>
<!--style="display: none" 显示会员-->
<div class="top7" id="landover" style="display: none" >是这个意思吗</div>
</html>
采纳吧
block写成black了
，UserNamelength的length是不会小于0的，因为最小是0，所以判断条件改成UserNamelength<=0
GridView1Style["display"] = "none";
GridView1Style[HtmlTextWriterStyleDisplay] = "none";
使用css控制页面有4种方式，分别为行内样式(内联样式)、内嵌式、链接式、导入式。
行内样式(内联样式)即写在html标签中的style属性中，如<div style="width:100px;height:100px;"></div>
内嵌样式即写在style标签中，例如<style type="text/css">div{width:100px; height:100px}</style>
链接式即为用link标签引入css文件，例如<link href="testcss" type="text/css" rel="stylesheet" />
导入式即为用import引入css文件，例如@import url("testcss")
如果想用javascript获取一个元素的样式信息，首先想到的应该是元素的style属性。但是元素的style属性仅仅代表了元素的内联样式，如果一个元素的部分样式信息写在内联样式中，一部分写在外部的css文件中，通过style属性是不能获取到元素的完整样式信息的。因此，需要使用元素的计算样式才获取元素的样式信息。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<style>
#one {
color: red;
width: 150px;
border: 1px solid blue;
}
#but {
color: blue;
width: 100px;
border: 1px solid red;
}
</style>
<script>
function cssrule(a, b) {
var a = a || 0;
var b = b || 0;
if (!!documentall) {
return documentstyleSheets[a]rules[b]style;
} else {
return documentstyleSheets[a]cssRules[b]style;
}
}
consolelog(cssrule()width);
consoledebug(cssrule(0, 1)width);
windowonload = function() {
var one = documentgetElementById("one");
var but = documentgetElementById("but");
butonclick = function() {
oneclassName = 'div2';
}
}
</script>
</head>
<body>
<div id="one">11111111111111</div>
<div id="but">22222222222222</div>
</body>
</html>
以上就是关于急！怎么用js提取出span标签内style里的属性值全部的内容，包括:急！怎么用js提取出span标签内style里的属性值、用css或者jquery怎么获取蓝色部分div的style的样式，改变border的边框样式、jquery 获取某style的元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）