<!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">
<head>
<title>getStyle</title>
<style>
.defaultCls{
width:200px;
height:300px;
border:1px solid windowtext;
}
</style>
<script>
function check(){
var obj = document.getElementById("content");
alert(getStyle(obj,"width"));
}
function getStyle(obj,styleName){
if (styleName==null){
return "";
}
var str = styleName;
var pos = str.indexOf("-");
while(pos>=0){
if (pos == str.length - 1){
str = str.substring(0,pos);
}
else if(pos == str.length - 2){
str = str.substring(0,pos)+str.substring(pos + 1).toUpperCase();
}
else{
str = str.substring(0,pos)+str.substring(pos + 1,pos + 2).toUpperCase()+str.substring(pos + 2);
}
pos = str.indexOf("-");
}
var style = "";
if (obj.currentStyle)
style = obj.currentStyle[str];
else if (window.getComputedStyle)
style = document.defaultView.getComputedStyle(obj,null).getPropertyValue(str);
return style || "";
}
</script>
</head>
<body>
<div id="content" style="font-size:12px" class="defaultCls">sfsd
</div>
<input type="button" value="check" onclick="check()" />
</body>
</html>
平常我们都是使用dom.style.display这种方式去获取某一个样式，可这样就会有个问题，如果我的样式是定义在class中的，这种方式就无能为力了。
还好浏览器提供给我们解决方法，那就是使用currentStyle属性或者是document.defaultView.getComputedStyle函数，不同浏览器的处理方式不一样。
这样我们就可以获取到我们想要的结果，不论是定义在style中还是class中。
上面的代码在ie以及Firefox中测试通过，其他浏览器未测试。
分享到：
相关推荐
如果想获取元素的某一个具体的样式属性值 1、元素.style.属性名 需要我们把元素的样式都写在行内样式上才可以（写在样式表中是不管用的） console.log(box.style.height) ->null 在真实项目中，这种方式不常用，...
- `li:nth-last-child(3):first-child ~ li:nth-last-child(1)` 选择第一个子元素之后的第一个元素，即第三个子`<li>`，并将其宽度设置为`calc(100% / 4)`，颜色设为红色。 - `li:nth-last-child(3):first-child ~...
在这个`mPass 定制某一个页面导航栏样式(页面加载后)`的项目中，我们主要探讨的是如何在页面加载完成后，通过编程方式对导航栏进行个性化设置。 首先，我们需要了解`mPass`的基本结构和API。`mPass`可能提供了相应...
本篇文章将深入探讨如何使用jQuery来判断一个元素是否具有特定的样式，包括行内样式和类样式。 首先，我们要理解样式在HTML中的两种常见形式：行内样式和类样式。行内样式是直接在HTML元素的`style`属性中定义的，...
标题中的“js获取某元素的class里面的css属性值代码”指的是在JavaScript中如何获取元素基于CSS类的样式属性值。在实际开发中，我们可能需要获取某个元素根据CSS类设置的`margin`、`padding`、`height`、`border`等...
在上述代码中，开发者创建了一个名为`scrollTop`的方法，通过监听`scroll`事件来实时获取滚动条的位置，并根据元素距离文档顶部的距离来判断是否需要将其固定。 以下是一个简化的示例，演示了如何在Vue中实现这一...
该函数的第一个参数是元素对象，第二个参数是伪元素，如果不需要获取伪元素的样式，应该传入null。在IE11以及更早版本的IE浏览器中，getComputedStyle方法不能获取到伪元素的样式。 总结来说，JavaScript获取元素...
原生JavaScript实现获取指定元素下所有后代元素的方法是一个在Web开发中非常实用的技巧。后代元素指的是嵌套在给定元素内的所有子元素以及更深层级的元素。这些元素可能是直接子元素，也可能是嵌套在多层子元素内部...
本教程将深入讲解如何使用jQuery来实现一个功能：当用户点击列表中的条目时，该条目的样式会发生变化，并能获取到其特定属性的值。这个功能在很多实际应用中都很常见，例如在选择银行列表的应用场景中，用户可能需要...
在使用 vue 的开发中，我们有时会引用外部组件，包括 UI 组件...【因为我们知道正确使用全局样式的姿势是使用一个全局的 app.css】 二、混用本地和全局样式 你可以在一个组件中同时使用有作用域和无作用域的样
通过以上步骤，你可以创建一个在子元素滚动时，父元素容器不跟随滚动的Vue组件，同时兼顾了PC和移动端的兼容性。如果遇到复杂场景，还可以结合现有的库或插件进一步优化。在实践中，不断调试和完善，将使你的代码...
在制作网页的过程中，我们经常需要精确知道某个元素在页面中的位置，这在进行布局调整、响应式设计或添加交互元素时尤为重要。JavaScript 提供了丰富的属性和方法来帮助我们获取页面元素的位置信息。这些信息可以...
"WEB中截屏某一个DOM"的技术就是实现这一功能的方法。它允许我们捕获页面上指定ID或具有特定属性的DOM元素，并将其转化为图像。这种技术广泛应用于用户交互、页面分享、自动化测试等多个场景。 首先，我们要理解DOM...
当用户点击某一行时，可以通过`event.target`获取到被点击的元素，并修改其CSS类，比如添加一个表示选中状态的类名。 - 同时，需要确保每次点击时取消之前选中的行的选中状态，这可能需要维护一个变量来跟踪当前...
在网页设计中，`checkbox` 是一种常用的交互元素，用于让用户选择或确认某项内容。默认情况下，浏览器提供了预设的样式，但这些样式可能无法满足设计师或开发者对个性化界面的需求。因此，如何改变 `checkbox` 的...
但是如果样式是在外链link中的或者是页面的非行内样式，就获取不到了。 在标准浏览器中可以通过window.getComputedStyll(obj,null)[property]来获取外链样式，但是在ie浏览器中则是通过obj.currentStyle来获取。 ...
网页中某一个 id 为 title 的元素中的内容是红色的 10. 样式表定义.outer {background-color:yellow} 表示（B）。网页中含有 class=”outer” 元素的背景色是红色的 47. 光标移动文本框上方时，文本框边框的颜色就...
【标题】：“一个网页文件 刚刚做好的” 这个标题表明我们正在讨论的是一个新完成的网页文件，可能是一个个人项目或网站设计的初期版本。它特别提到了“美文美影”，暗示这个网页可能专注于文学和视觉艺术的展示，...
2. **table.ss**：这是一个元素选择器与类选择器的组合，它会选取所有具有 "ss" 类的 `table` 元素。这个选择器设置了表格的边框，边框宽度为 1 像素（`border: 1px solid #000;`），颜色为黑色（`#000`），并使表格...