`
clrw
  • 浏览: 21400 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

我的理解:为什么obj.style.backgroundColor有时候取不到值?

 
阅读更多

obj.style.backgroundColor有时候能取到值,有时候取不到,这是为什么呢?看了下面的代码你就知道了。

<html>
    <head>
        <style type="text/css">
	    p {background-color: #ccc}
	</style>
	</head>
	<body>
	    <p id="demo" class="p">非内联样式。</p>
		<p id="demo2" style="height:50px; width:250px; margin-top:10px; text-align:center; line-height:50px; background-color:#ccc;">内联样式。</p>
	</body>
</html>

<script type="text/javascript">
    document.getElementById("demo").onclick = function() {
        alert(
            "高度:"+this.style.height+"\n"+
            "宽度:"+this.style.width+"\n"+
            "上边距:"+this.style.marginTop+"\n"+
            "对齐:"+this.style.textAlign+"\n"+
            "行高:"+this.style.lineHeight+"\n"+
            "背景颜色:"+this.style.backgroundColor
        );
        alert(
            "高度:"+getRealStyle(this, "height")+"\n"+
            "宽度:"+getRealStyle(this, "width")+"\n"+
            "上边距:"+getRealStyle(this, "marginTop")+"\n"+
            "对齐:"+getRealStyle(this, "textAlign")+"\n"+
            "行高:"+getRealStyle(this, "lineHeight")+"\n"+
            "背景颜色:"+getRealStyle(this, "backgroundColor")
        );
    };
    document.getElementById("demo2").onclick = function() {
        alert(
            "高度:"+this.style.height+"\n"+
            "宽度:"+this.style.width+"\n"+
            "上边距:"+this.style.marginTop+"\n"+
            "对齐:"+this.style.textAlign+"\n"+
            "行高:"+this.style.lineHeight+"\n"+
            "背景颜色:"+this.style.backgroundColor
        );
    };

    // 一定要取到值怎么办?可以用下面这个方法。
    function getRealStyle(obj, styleName) {
        var realStyle = null;
        if(obj.currentStyle) {
            realStyle = obj.currentStyle[styleName];
        } else if(window.getComputedStyle) {
            realStyle = window.getComputedStyle(obj, null)[styleName];
        }
        return realStyle;
    }
</script>

 我个人的理解和结论就是内联样式是可以取到值的,否则是取不到的,一定要取到值怎么办?可以用代码中的getRealStyle(obj, styleName)获取。

分享到:
评论

相关推荐

    ASP.NET程序中常用的三十三种代码.txt

     e.Item.Attributes.Add( "onmouseout","this.style.backgroundColor=\""+e.Item.Style["BACKGROUND-COLOR"]+"\"");  e.Item.Attributes.Add( "onmouseover","this.style.backgroundColor=\""+ "#EFF3F7"+"\""); ...

    ASP.NET常用代码

    e.Item.Attributes.Add( "onmouseout","this.style.backgroundColor=\""+e.Item.Style["BACKGROUND-COLOR"]+"\""); e.Item.Attributes.Add( "onmouseover","this.style.backgroundColor=\""+ "#EFF3F7"+"\""); } } ...

    前端面试题(2016含答案).docx

    f1()首次执行输出i的初始值0,f2()再次执行时i已增加到1。 15) JS程序输出 输出:1 1 解释:JavaScript中函数是第一类对象,bb作为函数aa的形参,不影响全局变量bb。因此,两个bb是独立的,各自输出1。 这些面试题...

    js给页面加style无效果的解决方法

    3. **CSS重置**:有些浏览器可能会有默认样式,或者开发者可能在项目中使用了CSS重置,如 Normalize.css 或 Reset.css,这些可能会影响到元素的默认样式。 4. **JavaScript错误**:检查是否存在语法错误或引用错误...

    Javascript改变CSS样式(局部和全局)

    document.getElementById('obj').style.backgroundColor = '#003366'; ``` 这会将元素的背景色设置为深蓝色。 #### 2. 改变`className` `className`属性允许我们改变元素的CSS类,进而应用预定义的一组样式。例如...

    简单的js表格操作

    鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff  var tr=document.getElementsByTagName("tr"); for(var i= 0;i&lt;tr.length;i++) { bgcChange(tr[i]); } // 鼠标移动改变...

    UIWebView的使用代码

    设置webview的opaque属性值为NO ? 1 webView.opaque = NO; 加载本地HTML页面 方式一 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 NSString *localHTMLPageName = @"myPage"; NSString *path...

    JS Select下拉框(支持输入模糊查询)

    当选定一个选项后,输入框的值将更新为选定的文本,隐藏的文本框(`txtSection`)则存储选定的值。 通过这种方式,我们可以创建一个具有搜索功能的Select下拉框,提高了用户体验,特别是当下拉选项非常多时,用户...

    奇妙的Javascript图片放大镜

    var bgx = (-1) * (Nx - 1) * (event.x - parseInt(document.all.bgLayer.style.left) + parseInt(document.body.scrollLeft)) - parseInt(obj.style.left) + parseInt(document.all.bgLayer.style.left);...

    一个快速添加标签的小玩意,但在FF下不能用,望高手指点

    2. **初步诊断**:怀疑问题可能出现在`obj.style.backgroundColor`返回值的不同,FF浏览器下返回的是`rgb(xxx,xxx,xxx)`格式。 ### 二、HTML基础知识 1. **元数据定义**:通过`&lt;meta&gt;`标签设置文档的字符集为UTF-8...

    JavaScript修改css样式style动态改变元素样式

    1. 改变直接样式:这种方式直接修改元素对象的style属性,例如使用document.getElementById('obj').style.backgroundColor="#003366"来改变某个元素的背景颜色。值得注意的是,直接操作style属性时,我们需要编写...

    js+html5生成自动排列对话框实例

    dialog.style.backgroundColor = "#FF0000"; document.body.appendChild(dialog); } function removeDialog() { var obj = document.getElementsByClassName("dialog"); var num = obj.length; for (var i = 0...

    js控制input框只读实现示例

    但是,静态地设置`readOnly`属性并不能满足所有需求,有时候我们可能需要动态地改变input框的只读状态。这时,JavaScript就派上用场了。通过JavaScript的DOM(文档对象模型)操作,我们可以获取到指定ID的元素并改变...

    js禁用和激活input表单的方法

    obj.style.backgroundColor = "#ADA8A7"; $('bt').onclick = function() { obj.disabled = false; obj.style.backgroundColor = "#fff"; } } ``` 在上面的代码中,我们首先获取了 Input 表单的对象,然后使用...

    用JS写的一个贪吃蛇游戏 分享下

    obj.style.backgroundColor = color; }catch(e){ } } function keyEvent(){ oldDirection = direction; var keyNum = event.keyCode; if(keyNum == 87){ //w direction = "Y--"; }else if(keyNum == 83){...

    fso浏览54646465465464564

    Response.Write "&lt;script language='javascript'&gt;alert('您编辑的不是文件或文件不存在!');window.close();&lt;/script&gt;" Exit Sub End If Dim oFile,FileStr Set oFile=oFso.OpenTextFile(Fname,1) If oFile....

    javascript操作css属性

    通过访问这个对象的属性,如`.fontSize`、`.backgroundColor`等,可以获取到具体的样式值。 在实际使用中,可能还会遇到获取元素的相对值(如百分比值)的问题。大多数浏览器只返回绝对值,例如`margin-left`可能...

    javascript使用onclick事件改变选中行的颜色

    然后,它将`obj`(即被点击的行)设为新的当前活动行,并将其背景色更改为`#F2F2F2`,这是一个常见的淡灰色,以突出显示选中状态。 除了`onclick`,在这个例子中还提到了`onmouseover`事件,它在鼠标进入元素时触发...

    JavaScript获取系统自带的颜色选择器功能(图)

    选择的颜色会被转换为16进制表示,并设置到`div_color`元素的背景色和值。 值得注意的是,这段代码仅适用于IE浏览器,因为它依赖于`document.all`和`ActiveXObject`这两个IE特有的属性。对于其他浏览器,如Chrome、...

Global site tag (gtag.js) - Google Analytics