Изменение стиля атрибутов в JavaScript Использование

Question

имя класса HTML

<h1>Changing the Style</h1> 
<p>JavaScript can change the style of an HTML element.</p> 

<button type="button" onclick="openMe()">Open!</button> 
<button type="button" onclick="closeMe()">Close!</button> 

<p id="demo">Extra details...You can open and close this paragraph using the buttons above.</p> 

CSS

.close { 
    display: none; 
} 
.open { 
    display: block; 
} 

button { 
    width:150px; 
    background-color: #00CCEE; 
    margin-left:15px; 
    font-size:120%; 
} 

#demo { 
    color:white; 
    background-color: #7F7F7F; 
    padding:10px; 
    font-size:120% 
} 

JAVASCRIPT

function closeMe(){ 
    x=document.getElementById("demo"); 
    x.className="close"; 
} 

function openMe(){ 
    x=document.getElementById("demo"); 
    x.className="open"; 
} 

Могу ли я использовать Как x.IdName= "close"; в JavaScript?

До сих пор я знаю, что есть два способа изменить атрибуты стиля с помощью Javascript.

x = document.getElementById("demo"); 

1. непосредственно, например .. (x.style.backgroundColor ="red";

2. по имени класса, например .. (x.className="abc";)

   для использования имени класса мы используем:

   x = document.getElementById("demo"); 
   x.className="abc"; 
   

   Мои вопросы :

Могу ли я использовать идентификатор, чтобы изменить атрибуты стиля, используемые при использовании имени класса? если да Прошу показать.

Можно ли назвать «x» {x=document.getElementById("demo");} переменной?

Answer 1

Есть три способа, чтобы изменить стиль элемента с JavaScript:

1. Измените внутренний стиль. Это представлено свойством .style элемента и атрибутом style в теге HTML.
2. Измените любую функцию элемента так, чтобы селекторы на наборах правил в таблице стилей начинали и прекращали ее сопоставление. например .foo { ... } будет соответствовать элементам, входящим в класс foo, поэтому, если вы измените свойство .className, чтобы добавить или удалить элемент из этого класса, вы измените применимые к нему правила. Вы можете изменить другие факторы, такие как id (обычно это не логическая идея), произвольные атрибуты или что-либо еще, для которых существует selector.
3. Изменить the rulesets in the stylesheet себя.

Answer 2

Вы уже изменили атрибут стиля элемента в своем примере.

x.style.backgroundColor= "red"; 

Это то, что изменения стиля атрибут есть. Во втором примере вы редактируете имя класса элементов. Я предполагаю, что вы имеете в виду, если вы можете применять стили к элементам, используя идентификаторы?

Если это так, вы можете стилизовать элементы, используя селектор класса, который выглядит как этот

.className { 
    /* Some styles */ 
} 

Или с селектором

#demo { 
    /* Other styles */ 
} 

два примером выше либо нужно идти в их собственную таблицу стилей или внутри HTML в элементе <style></style>.

Answer 3

document.getElementById выбирает элемент с определенным ID. Когда вы хотите выбрать элементы с помощью имени класса, вы можете использовать i.e. document.querySelector('.your-class') для выбора узлов, содержащих className вашего класса.

Когда Вы пишете

x = document.getElementById("demo"); 
x.style.backgroundColor ="red" 

Вы устанавливаете стиль с помощью Id, чтобы выбрать узел.

В строке x = document.getElementById("demo"); x является переменной. После выполнения этой строки значение этой переменной устанавливается на любую функцию, возвращаемую функцией document.getElementById("demo");. В этом случае он указывает на элемент DOM с атрибутом Id «demo».