Установка значения атрибута элемента HTML, равного значению другого атрибута, с использованием Javscript - PullRequest
Новая
       0

Установка значения атрибута элемента HTML, равного значению другого атрибута, с использованием Javscript

0 голосов
/ 02 апреля 2020

Я новичок в Javascript и столкнулся с проблемой:

Я пытаюсь установить значение ширины div, равное ширине оболочки span. Рассматриваемый 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, не встроенный) ), который в свою очередь масштабируется с использованием единиц просмотра. Это было сделано для того, чтобы добавить функции адаптивного веб-дизайна, что привело к путанице.

Я думаю просто добавить ширину кнопок в целом, поскольку они кажутся элементами div, и используя это значение для ширины вместо ширины обертки, что может быть даже невозможно.

Ответы [ 2 ]

1 голос
/ 02 апреля 2020

style свойство элементов содержит inline styles элементов, а не их вычисленные стили.
, поэтому, если вы хотите получить значение свойства элемента, вы должны использовать window.getComputedStyle(), который принимает элемент в качестве параметра и возвращает это целые стили, тогда вы можете получить его ширину на 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) и выберите div # elm2, чтобы увидеть его inline width style
Подробнее о getComputedStyle:
Window.getComputedStyle ()
JavaScript Window getComputedStyle () метод

0 голосов
/ 02 апреля 2020

Пролет является встроенным элементом. Он не имеет ширины или высоты, и вы не можете установить его ширину или высоту. Ваш код должен работать, но только на элементах блока, таких как div.

Редактировать: Вы можете использовать element.offsetWidth, чтобы получить фактическую визуализированную ширину элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...