jQuery CSS методы - упражнения, практика, решение

jQuery CSS [10 упражнений с решением]

1. Получить цвет фона элемента. Перейти к редактору
Нажмите на следующие абзацы и получите цвет фона.

Пример данных :
HTML:

 <Тело>
<p> Упражнения jQuery </ p>
<p> и решение. </ p>
</ Body>

CSS:

 <Стиль>
  п {
      поле: 8px;
	  размер шрифта: 16 пикселей;
	}
 .мои занятия 
    {
	 цвет: # FA5858;
	}  
Выделите 
  {
    фон: # CEF6F5;
  }
 </ Стиль> 

Нажмите меня, чтобы увидеть решение

2. Добавьте следующий класс «myclass» к соответствующим элементам абзаца. Перейти к редактору
Пример данных :
HTML:

 <Тело>
<p> Упражнения jQuery </ p>
<p> и решение. </ p>
</ Body>

CSS:

  
<Стиль>
  п {
      поле: 8px;
	  размер шрифта: 16 пикселей;
	}
 .мои занятия 
    {
	 цвет: # FA5858;
	}  
Выделите 
  {
    фон: # CEF6F5;
  }
 </ Стиль>

Нажмите меня, чтобы увидеть решение

3. Найдите ширину и высоту различных элементов. Перейти к редактору
Пример данных :

 <Тело>
<p> Упражнения jQuery </ p>
<div style = "height: 75px; ширина: 200px; отступ: 10px; поле: 3px; граница: 1px сплошной синий; цвет фона: # 81DAF5;"> </ div>
</ Body>

Нажмите меня, чтобы увидеть решение

4. Получить прокрутку сверху и слева от элемента. Перейти к редактору
Пример данных :

 <Тело>
<Р> </ р>
 </ Body>
 

Нажмите меня, чтобы увидеть решение

5. Получите доступ к позиции элемента. Перейти к редактору
Пример данных :

 <Тело>
 <div style = "высота: 75px; ширина: 200px; отступ: 10px; поле: 3px; граница: 1px сплошной синий; цвет фона: # F3E2A9;">
 </ DIV>
 <Р> </ р>
 </ Body>

Нажмите меня, чтобы увидеть решение

6. Найдите innerHeight и innerWidth элемента. Перейти к редактору
Пример данных :

 <Тело>
<DIV> </ DIV>
<Р> </ р>
</ Body>

Нажмите меня, чтобы увидеть решение

7. Найдите externalHeight и outerWidth элемента. Перейти к редактору
Пример данных :

 <Тело>
<DIV> </ DIV>
<Р> </ р>
</ Body>
   

Нажмите меня, чтобы увидеть решение

8. Найдите элемент, который содержит указанный класс. Перейти к редактору
Пример данных :
HTML:

 <Тело>
<div id = "div1" class = "divclass"> </ div>
<div id = "div2" </ div>
<div id = "div3" </ div>
</ Body> 

CSS:

 <Стиль>
 .divclass 
  {
    ширина: 90 пикселей;
	высота: 75 пикселей;
	поле: 5px;
	цвет фона: # F3E2A9
 }
</ Стиль> 

Нажмите меня, чтобы увидеть решение

9. Найдите смещение элемента. Перейти к редактору
Пример данных :
HTML:

 <Тело>
<Р> </ р>
</ Body> 

CSS:

 <Стиль>
п {
    Запас-топ: 20px;
    поле слева: 10 пикселей;
    обивка: 5px;
    граница: 2px solid # 666;
  }
</ Стиль> 

Нажмите меня, чтобы увидеть решение

10. Переключение указанного класса при нажатии элемента. Перейти к редактору
Пример данных :
HTML:

 <Тело>
<Р> </ р>
</ Body> 

CSS:

 <Стиль>
п {
    Запас-топ: 20px;
    поле слева: 10 пикселей;
    обивка: 5px;
    граница: 2px solid # 666;
  }
</ Стиль> 

Нажмите меня, чтобы увидеть решение

Еще не все !

Не отправляйте решение вышеупомянутых упражнений здесь, если вы хотите внести вклад, перейдите на соответствующую страницу упражнения.

Демонстрация в реальном времени:

См. Pen- common-jquery-core-упражнение от w3resource ( @ w3resource ) в CodePen .