使用 Javscript 設置 HTML 元素屬性的值等於另一個屬性的值

Question

我是 Javascript 的新手，遇到了一個問題：

我正在嘗試將 div 的寬度值設置為跨度包裝器的寬度。 有問題的 div 嵌套在包裝器中，如果這對問題有任何影響的話。 這是我正在使用的代碼。

<script>
function O(i) {
    return typeof i == 'object' ? i : document.getElementById(i)
}

function S(i) {
    return O(i).style
}
</script>

...

<script> S('idOfDiv').width = S('idOfWrapper').width </script>

這是行不通的。 如果我將分配的右側更改為“20px”，它會起作用。 但如示例所示，它對 div 的寬度沒有影響。 我已經在 Head 標記中定義了前兩個函數，並且賦值發生在包裝器和 div 代碼之后。 控制台日志不會拋出任何錯誤來幫助調試。 為什么是這樣？ 這與屬性值不是正確的類型有關嗎？

澄清一下，包裝器的寬度主要由包裝器內按鈕的字體大小決定（外部 CSS，不是內聯），然后使用視口單位進行縮放。 這樣做是為了添加響應式 Web 設計功能，這讓事情變得一團糟。

我正在考慮簡單地添加按鈕的寬度，因為它們似乎是 div 元素，並使用這個值作為寬度而不是包裝器的寬度，這甚至可能是不可能的。

Answer 1

元素的style屬性包含元素的inline styles ，而不是其計算的 styles。
所以如果你想得到一個元素的屬性值，你必須使用window.getComputedStyle()接受一個元素作為參數並返回它的整個 styles，然后你可以通過window.getComputedStyle(myElement).width得到它的寬度

請參見下面的示例：
HTML

  <body>
    <div id="elm1" style="width:200px"></div>
    <div id="elm2"></div>
    <script>
      assignWidth(
        document.getElementById("elm1"),
        document.getElementById("elm2")
      );
    </script>
  </body>

CSS

        div {
        height: 100px;
        background-color: blue;
        margin: 10px;
    }

Javascript

 const assignWidth = (elm1,elm2) => {
        elm2.style.width = window.getComputedStyle(elm1).width ;
    }

您可以檢查您的文檔（按 F12）和 select div#elm2 以查看它的inline width style
閱讀有關getComputedStyle更多信息：
Window.getComputedStyle()
JavaScript Window getComputedStyle() 方法

Answer 2

跨度是一個內聯元素。 它沒有寬度或高度，你不能設置它的寬度或高度。 您的代碼應該可以工作，但僅限於塊元素，例如 div。

編輯：您可以使用element.offsetWidth來獲取元素的實際渲染寬度。

使用 Javscript 設置 HTML 元素屬性的值等於另一個屬性的值

問題描述

2 個解決方案

解決方案1
1 2020-04-02 20:46:19

解決方案2
0 2020-04-02 20:27:44

使用 Javscript 設置 HTML 元素屬性的值等於另一個屬性的值

問題描述

2 個解決方案

解決方案1 1 2020-04-02 20:46:19

解決方案2 0 2020-04-02 20:27:44

解決方案1
1 2020-04-02 20:46:19

解決方案2
0 2020-04-02 20:27:44