本文介绍在JavaScript中获取CSS样式的三种方式：行间样式通过element.style直接读取；内联样式利用getComputedStyle或currentStyle实现跨浏览器兼容；外链样式则通过document.styleSheets遍历cssRules获取。提供完整代码示例与兼容性说明。
获取行间样式
获取行间样式时，首先需要通过document.getElementById等方法获取目标元素节点。随后，直接访问该元素的style属性即可读取已设置的CSS值。例如，获取背景色可使用element.style.background。
<div id='div1' style="backgroud:red">测试</div>
<script>
var odiv=document.getElementById('div1'); //先获取到要获取样式的元素标签，也就是获取到div1
console.log(odiv.style.background); //这样我们就可以获取到了行间的样式了
</script>
获取内联样式
对于内联样式（即嵌入在HTML中的<style>标签定义的样式），由于不同浏览器对计算后样式的支持存在差异，需采用兼容方案。现代浏览器推荐使用getComputedStyle(element, null)获取最终渲染样式，其中null表示无伪类。对于IE8及更早版本，则需回退使用element.currentStyle属性。
<html>
<head>
<style>
.div2{
background:red;
}
</style>
</head>
<body>
<div id="div1" class="div2">测试</div>
<script>
var odiv=document.getElementById('div1'); //先获取到要获取样式的元素标签，也就是获取到div1
//console.log(getComputedStyle(odiv,null).background); getComputedStyle("元素"，"伪类") 是获取到计算后的样式，第二个参数是伪类，如果没有直接使用null 但是万恶的IE8及之前不支持所以需要用到下面的方法
//console.log(currentStyle.background) 这个只有IE本身支持 也是获取到计算后的样式
console(window.getComputedStyle?getComputedStyle(odiv,null).background:odiv.currentStyle); //跨浏览器兼容
</script>
</body>
</html>获取外链样式表
针对外链样式表（通过<link>标签引入的CSS文件），JavaScript可通过document.styleSheets集合访问所有样式表。获取特定样式表后，再访问其cssRules数组，即可读取其中定义的样式规则。例如，通过sheet.cssRules[0].style.background可获取第一个规则的样式值。
<html>
<head>
<link rel="stylesheet" type="text/css" href="basic.css" /> //外链的样式表
</head>
<body>
<div id="div1" class="div2" >测试</div>
<script>
var sheet=document.styleSheets[0] //获取到外链的样式表
var rule=sheet.cssRules[0] //获取到外链样式表中的第一个样式
console.log(rule.style.background) //red 这样就可以获得了外链样式表中指定的样式了
</script>
</body>
</html>
外链样式表的结构通常包含<link>标签指定href属性指向CSS文件。在JavaScript中，通过遍历document.styleSheets获取样式表对象，再深入cssRules数组访问具体样式规则。此方法适用于动态读取外部CSS文件中的样式定义。
.div2{
background:red;
}以上内容总结了JavaScript获取CSS样式的三种主要方式：行间样式、内联样式和外链样式。每种方式对应不同的DOM API和兼容性问题，开发者需根据实际需求选择合适的实现方案。