获取父 javascript 的 CSS maxWidth 值

Question

我有这些元素：

<div class="parent"><div class="child"></div></div>

css: .parent{max-width:100px}

是否可以使用 "child" 的 "parentNode" 获取 css 中指定的 "max-width" 值（父项的名称不可预测）以便与当前变量数据？

我正在尝试：

var childDIV=querySelector('.child');
var result= childDIV.parentNode.style.maxWidth`

"result" 为空。

另一个尝试是使用 "getComputedStyle" 方法：

var result =window.getComputedStyle(childDIV.parentNode,null);
result.getPropertyValue("maxWidth");

"result" 是空的，尽管正确的 "maxWidth" 值出现在 "getComputedStyle" 的值中。

var childDIV=document.querySelector('.child');
var result= childDIV.parentNode.style.maxWidth;
console.log(`Approach 1: ${result}`);

var result =window.getComputedStyle(childDIV.parentNode,null);
result = result.getPropertyValue("maxWidth");
console.log(`Approach 2: ${result}`);

 .parent{max-width:100px}

<div class="parent"><div class="child"></div></div>

Answer 1

您走在正确的轨道上 - 因此，您的第一种方法在这种情况下不起作用，因为该元素在其样式声明中没有直接包含 max-width（请参见下面的 .other 示例因为这个 何时会 起作用）。

第二种方法是正确的，但是你有点混淆了访问参数——如果你使用 .getPropertyValue，你使用 CSS-style "max-width"，如果你不使用，你使用 .maxWidth 就像 .style:

var childDIV=document.querySelector('.child');

var result= document.querySelector('.other').style.maxWidth;
console.log(`Approach 1: ${result}`);

var compStyle = window.getComputedStyle(childDIV.parentNode,null);

result = compStyle.maxWidth;
console.log(`Approach 2: ${result}`);

result = compStyle.getPropertyValue("max-width");
console.log(`Approach 3: ${result}`);

.parent{max-width:100px}

<div class="parent"><div class="child"></div></div>

<div class="other" style="max-width:50px"></div>

获取父 javascript 的 CSS maxWidth 值

get the CSS maxWidth value of the parent javascript

javascript

css

parent-child