Это правильный способ совместить два divs?Как вы получаете два div имеют одинаковый borderRadius?
var div2 = document.getElementsByClassName("div2");
div2.style.borderRadius = "100px"
document.getElementById("div1").style.borderRadius = div2.style.borderRadius;
Просто новичок в javascript.
Что вам не хватает в том, что document.getElementsByClassName("div2"); возвращает ARRAY-подобный объект всех элементов, которые имеют все указанные имена классов, а не прямую ссылку.
Используйте его таким образом,
var div2 = document.getElementsByClassName("d2");
div2[0].style.borderRadius = "100px";
document.getElementById("d1").style.borderRadius = div2[0].style.borderRadius;
ПРОВЕРКИ это Jsfiddle: http://jsfiddle.net/ft1Ljggn/8/
Просто комментировать свой код, document.getElementsByClassName() возвращает HTMLCollection, ни один DOM элемент. Вы должны использовать document.getElementById() или document.querySelector(), если вы пытаетесь просто получить один элемент.
И вы, как правило, не хотите использовать JS для добавления стиля, если только стиль, который вы хотите использовать, не является динамическим. В этом случае, вы должны использовать файл CSS и добавить класс:
.round-border {
border-radius: 100px;
}
Если вы все еще хотите использовать JS, чтобы добавить класс вместо того, чтобы положить его в HTML, вы можете сделать следующее:
document.getElementById("div1").classList.add('round-border');
document.getElementById("div2").classList.add('round-border');
Предполагается, что вы дали своим HTML-элементам правильные идентификационные имена.
Но, как я уже сказал, поскольку вы используете статическое значение 100px, было бы разумнее добавить этот класс к вашим элементам в ваш HTML-файл.
Получить идентификатор и ниже этого кода ..
целевая переменная = document.getElementById ("div1"); target.style.borderRadius = "100px";
Вот один строка кода, надеюсь, что это помогает:
div1.style.borderRadius = window.getComputedStyle(div2).getPropertyValue('border-radius');
Возможно, вы можете играть с getComputedStyle и getPropertyValue для достижения сравнения двух свойств, а также. Вам не нужно прилагать дополнительных усилий, чтобы получить в них логику массивов.
Ответ Варуна хорош; Другой способ, особенно если вы хотите иметь более похожий стиль DIV или иметь более общие атрибуты, такие как цвет/граница и т. Д., - это определить класс CSS и применить этот класс к DIV, например.
<html>
<head>
<style>
.roundedcorners{
border-radius:100px;
border: 2px solid #8AC007;
}
</style>
</head>
<body>
<div id="div1" class="roundedcorners">Content 1</div>
<div id="div2" class="roundedcorners">Content 2</div>
</body>
</html>
Вы все еще можете задать положение, размер и т.д. на отдельных DIVs (даже их перекрываться, если вы хотите).
Вы пропустили точку с запятой 'div2.style.borderRadius =" 100px ";' –
Показать HTML. Если вы выберете по классу, вы получите массив назад. Кажется, вы путаете получение элементов по идентификатору и/или по имени класса – Michelangelo
Что вы подразумеваете под своим соответствием? Вы пытаетесь заставить их соответствовать, или проверить, соответствуют ли они? – Dannnno