Question

我正在尝试使用javascript显示div的图层样式。我的js代码如下：

<body>
<script>
function displayStyle(objectId,styleName){
    var objRef=document.getElementById(objectId);
    var styleValue=eval(objRef.style + styleName);
    window.alert(styleName +" =" +styleValue);
    }

</script>
<div id="myObject" style="position: absolute; left:50px; top: 200px; background-color: #cccccc;">My Object</div>
<form>
 style:<input type="text" name="styleText">
<input type="button" value="Display Style"
onClick="displayStyle('myObject',this.form.styleText.value);">
</form>
</body>

问题在于按钮点击，样式属性不会在窗口警报中弹出。控制台显示 Uncaught SyntaxError：意外的标识符 Plz帮助。

Answer 1

您应该使用bracket notation

function displayStyle(objectId, styleName) {
    var objRef = document.getElementById(objectId);
    var styleValue = objRef.style[styleName];
    window.alert(styleName + " =" + styleValue);
}

Answer 2

我真的不建议使用eval（）;

另一个问题是你在线上缺少一个点。

var styleValue = eval(objRef.style + '.' + styleName);

但这只会假设你也传递一个有效的样式属性名称。我会尝试使用以下方法之一。

如果要获取其中一个样式属性属性值，可以使用它们。

   function displayStyle(objectId, styleName) {
        var objRef = document.getElementById(objectId),
            styleValue = objRef.style.getPropertyValue(styleName);
       window.alert(styleName +" = " +styleValue);
   }

另一种方法是使用方括号语法。在JS中，您可以使用a访问Object中的内部属性。像大多数基于C语言一样。但是它们也为你提供了一个基于字符串的访问器。

var person = {
    name: 'Rick'
}

console.log(person.name); //Rick
console.log(person['name']); //Rick

此系统适用于JS中的任何对象。但是，在Style对象上使用它可能会导致使用不同的属性名称。

E.G在HTML样式属性中使用margin-left。如果你想使用方括号来表示这个值，你必须使用样式['marginLeft'];

如果想要获取已在对象上呈现的所有样式属性，也可以使用。

window.getComputedStyle(objRef);

它返回一个样式属性的对象，但具有计算的高度等。但它在旧版浏览器中不起作用。

很抱歉，如果不清楚，我会在手机上输入。

在javascript中显示元素的图层样式

2 个答案: