使用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>
<title>getHexColor js/jQuery 获得十六进制颜色</title>
<meta charset="utf-8" />
<script type="text/javascript">
function getHexBgColor(){
var str = [];
var rgb = documentgetElementById('color')stylebackgroundColorsplit('(');
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb[1]split(',')[k])toString(16);
}
str = '#'+str[0]+str[1]+str[2];
documentgetElementById('color')innerHTML = str;
}
function getHexColor(){
var str = [];
var rgb = documentgetElementById('color')stylecolorsplit('(');
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb[1]split(',')[k])toString(16);
}
str = '#'+str[0]+str[1]+str[2];
documentgetElementById('color')innerHTML = str;
}
</script>
<style type="text/css">
#color{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div style="color: #88ee22; background-color: #ef8989;" id="color"></div>
<input onclick="getHexBgColor();" type="button" value="获得背景色" />
<input onclick="getHexColor();" type="button" value="获得字体颜色" />
</body>
</html>
点击“获得背景色”按钮，会调用getHexBgColor()方法获取css的背景色。
objstyle方法，这个方法只能JS只能获取写在html标签中的写在style属性中的值（style=”…”），看下面代码
XML/HTML代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 10 Transitional//EN” “>
'如果是从数据库读取的数据，其实用动态语言来判断更简单的。比如ASP：
n=rs("number")
<td id="a1" <%if n>100 then%> style="color:#ff0000"<%end if%>><%=n%></td>
//js可以这样做：
var td=documentgetElementById("a1");
var n=parseInt(tdinnerTEXT);
if(n>100)tdstyle="color:#ff0000";
js中标签没有颜色属性的是html ，颜色为无色
一般来说，通过stylebackgroundColor属性，可以设置网页中的某个对象的背景颜色，请看下面的两行代码。
①设置对象背景颜色为无色
documentgetElementById('MyDiv')stylebackgroundColor="";
看到了吗，直接设置为空就行了。
②设置对象背景颜色为某种颜色
documentgetElementById('MyDiv')stylebackgroundColor="#008400";
看清楚了没有，填上颜色代码即可。
③使用Jquery设置对象背景颜色
$('MyDiv')css("background","black");
知识拓展：获取对象背景颜色
function toHex(N) {
if (N==null) return "00";
N=parseInt(N); if (N==0 || isNaN(N)) return "00";
N=Mathmax(0,N); N=Mathmin(N,255); N=Mathround(N);
return "0123456789ABCDEF"charAt((N-N%16)/16) + "0123456789ABCDEF"charAt(N%16);
}
function RGBtoHEX(str)
{
if (strsubstring(0, 3) == 'rgb') {
var arr = strsplit(",");
var r = arr[0]replace('rgb(','')trim(), g = arr[1]trim(), b = arr[2]replace(')','')trim();
var hex = [
toHex(r),
toHex(g),
toHex(b)
];
return "#" + hexjoin('');
}
else{
return str;
}
}
// 大写#FF0000
alert(RGBtoHEX($("#MyDiv")css("backgroundColor")) == "#FF0000")
javascript设置标签的背景颜色的方法：1、创建一个button按钮，给按钮绑定onclick事件；2、创建funcbg()函数，通过id获取p对象；3、给style属性中的background属性赋值即可。
在js标签内，创建funcbg()函数，在函数内，使用getElementById（）方法通过id获得p对象，通过给style属性中的background属性赋值，实现改变p标签的背景颜色。
收集一个函数：获取随机颜色值
复制代码
代码如下:
function
getRandomColor(){
return
"#"+("00000"+((Mathrandom()16777215+05)>>0)toString(16))slice(-6);
}
说明：
1、16777215为16进制的颜色ffffff转成10进制的数字
2、>>数字取整
3、转成16进制不足6位的以0来补充
在线演示代码：
js随机颜色
documentwriteln('#'+('00000'+(Mathrandom()0x1000000
以上就是关于如何javascript获取css中的样式全部的内容，包括:如何javascript获取css中的样式、JS （javaScript）中获取CSS背景颜色的问题、JS中如何获取CSS属性等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）