获取document.activeElement.id的style属性

Question

我想知道焦点元素的样式属性。我的代码不起作用：

alert(document.activeElement.id.style.border);

但它使用此代码显示id：

alert(document.activeElement.id);

有任何帮助吗？ 我不想使用jquery。我正在IE 7上做一个项目。我知道很多人认为IE 7不是浏览器。

Answer 1

您需要查看element.style，而不是element.id.style。元素的ID没有样式。

alert(document.activeElement.style.border);

Answer 2

id是相关node的属性，style也是该节点的属性，因此将id替换为style.border（ id没有自己的属性，除了字符串固有的属性，因为它只是一个字符串）来提供：

document.activeElement.style.border;

在编写时，您试图访问字符串的style属性，该属性不存在，因此未定义。

要访问border的各个属性：

document.activeElement.style.borderStyle;
document.activeElement.style.borderWidth;

依此类推，访问各个边框的各个属性（border-left，border-right等）：

document.activeElement.style.borderLeftWidth;
document.activeElement.style.borderLeftStyle;

而且，等等......

回应OP留下的评论（在另一个答案中）：

  

但为什么这段代码：alert(document.activeElement.style.borderColor);会显示空白警告？

问题可能是样式表中定义了样式，而style属性只访问元素的style 属性中的样式。在当代浏览器中，您需要查看window.getComputedStyle()以查看样式的计算渲染输出，例如：

window.getComputedStyle(document.activeElement, null).border;

Internet Explorer具有currentStyle对象的替代方案（在某些版本中），但没有IE或Windows，我无法提供洞察力。下面的参考文献中有一个链接，可以将您带到Microsoft的文档中。

参考文献：

• currentStyle object。
• HTMLElement.style。
• Window.getComputedStyle()。