Изменение CSS с помощью DOM getElementsByName

Question

Изменение CSS с помощью DOM getElementsByName

Я пытаюсь изменить CSS на DOM в JS, мне удалось изменить атрибуты HTML, но не атрибуты CSS. Похоже, что CSS не зависит от этой конкретной модели DOM.

Код выглядит так...

<style>
    #circle1{

            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 200px !important;
            left: 405px !important;
            background: black !important;
            border-bottom-left-radius: 50px !important;
            border-bottom-right-radius: 50px !important;
            border-top-left-radius: 50px !important;
            border-top-right-radius: 50px !important;
            z-index: 10 !important;
            visibility: hidden !important;

    }


    </style>
</head>

<body>
<script type="text/javascript">
function showCircle(){
    document.getElementsByName ("circle").style.visibility="visible";  
}

</script>
<div id="circle1" name="circle"></div>

<input type="button" onclick="showCircle()" value="show circle with display property">
</body>

2

javascript css3 dom getelementsbyname

Источник

user1796158 20 апр '13 в 01:32

4 ответа

Другие вопросы по тегам javascript css3 dom getelementsbyname

user1041642 20 апр '13 в 01:38 2013-04-20 01:38 · Answer 1 · 2013-04-20 01:38

Попробуй это

function showCircle(){
    document.getElementsByName("circle")[0].style.visibility="visible";  
}

и удалить !important от css класс для атрибута видимости

Пример JS Fiddle

5

Источник

user1041642 20 апр '13 в 01:38

user707111 20 апр '13 в 01:37 2013-04-20 01:37 · Answer 2 · 2013-04-20 01:37

getElementsByName возвращает NodeList элементов. Если вы хотите первый элемент, скажите так:

document.getElementsByName("circle")[0].style.visibility = "visible";

Но если у вас есть только один, почему бы просто не использовать id? <div> на самом деле не должно иметь name в любом случае...

document.getElementById('circle').style.visibility = 'visible';

Если их много, вы можете вместо этого использовать классы. (И классы для наглядности тоже могут быть лучше!)

Наконец, прекратите делать все ваши стили !important без веской причины. Почти никогда нет веских причин делать какие-либо правила важными, и это может привести к беспорядку. !important когда конкретность сделала бы вещи намного приятнее. Если вы просто бросили их, чтобы попытаться что-то исправить... это еще хуже.

user486351 20 апр '13 в 01:40 2013-04-20 01:40 · Answer 3 · 2013-04-20 01:40

Вы установили все как !important, Это имеет приоритет над встроенными стилями. Самое быстрое решение было бы установить style.visibility = 'visible!important'или вы могли бы неважно, импортеры.

0

Источник

user486351 20 апр '13 в 01:40

user1796158 23 апр '13 в 04:23 2013-04-23 04:23 · Answer 4 · 2013-04-23 04:23

Спасибо вам всем за ваши предложения, самая большая проблема заключалась в том, что они перевесили большую часть JS. Я переключился на использование дисплея и удалил! Важно. Код следующим образом. Я прекратил использовать другую функцию, чтобы скрыть элементы div и регистр, чтобы показать их, так как генератор случайных чисел сделал ввод относительно того, какой регистр был видим

document.getElementById("circle1").style.display = "block";