Learning JS - почему мои элементы не имеют каких-либо стилей

я борюсь с моей веб-страницеLearning JS - почему мои элементы не имеют каких-либо стилей

document.getElementById("btn").addEventListener("click", function(){ 
 
    var g = document.getElementById("guitar"); 
 
    console.log("Styles:", g.style.left,g.style.top, g.style.width,g.style.height, g.style.background); 
 
});

<html> 
 
    <head> 
 
     <style> 
 
    
 
     .stage { 
 
    \t position:relative; width:400px;height:300px;background:brown; 
 
     } 
 
    
 
     .guitar { 
 
    \t position:absolute;  \t left:20px;  \t top:10px;  \t width:150px;  \t height:150px;  \t background:#f63f63; 
 
     } 
 
    
 
     </style> 
 
    </head> 
 
    <body> 
 
    
 
     <input type="button" id="btn" value="Do something" /> 
 
    
 
     <div class="stage" id="stage"> 
 
     <div class="guitar" id="guitar" /> 
 
     </div> 
 
    <body> 
 
    </html>

Если вы обратите внимание на последнюю строку кода, я имею в виду g для гитары (я знаю, плохое имя и т. Д., Я просто возился здесь).

Вопрос, который у меня есть, когда я положил часы на g и разворачивал свойства и переходил к стилю, их нет (в списке стилей нет значений). Даже фон показывает пустое значение, но HTML корректно отображает его.

Почему я не вижу значения в окне часов?

источник

2016-08-02 MyDaftQuestions

@MyDaftQuestions Тогда ** не включают fuction **. Выньте ** все ** код, который не имеет значения, не просто удаляйте тела функций, но оставляйте их вызовы. Я исправил ваш вопрос, чтобы он включал минимальный ** полный ** пример, который на самом деле выполняется, но в состоянии, которое вы опубликовали, ваш вопрос должен был быть закрыт. – meagar

Вашего g элемент не имеет никакого стиля атрибутов ...

Вы можете увидеть все определения стиля на «вычисленный стиле», так как они являются регулярными декларациями CSS, и НЕ определяется с помощью атрибутов.

источник

2016-08-02 14:25:25

Oh man .. все. Я запутался в классе и стилях – MyDaftQuestions

Попробуйте window.getComputedStyle (g, null) .getPropertyValue ("height");

Это должно сделать трюк

источник

2016-08-02 14:28:10

От https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style:

Свойство HTMLElement.style возвращает CSSStyleDeclaration объект, представляющий только атрибут встроенного стиля элемента, игнорируя любые прикладные правила стиля.

Это означает, что если у вас есть элемент <div style="left: 10px;">, то его объект типа будет содержать значение left, но если у вас есть только правила CSS div { left: 10px; }.

Как уже говорилось, вы можете использовать getComputedStyle(), чтобы получить фактический стиль, применяемый CSS.

источник

2016-08-02 14:33:42

Learning JS - почему мои элементы не имеют каких-либо стилей

ответ

Смежные вопросы