Как изменить свойства CSS элементов HTML, используя JavaScript или JQuery

Question

Как я могу изменить CSS с javascript.

Я использую jQuery-ui Dialog и хочу изменить стиль DIV из javascript.

Спасибо

Answer 1

Проверьте документацию jQuery . Если вы хотите что-нибудь, это будет там.

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

$(selector).css(properties);  // option 1
$(selector).css(name, value); // option 2

Итак, если у вас есть DIV с идентификатором «mydiv», и вы хотите сделать фон красным, вы должны сделать

$("div#mydiv").css({'background-color' : 'red'}); // option 1
$("div#mydiv").css('background-color','red');     // option 2

Первый способ проще, если вы устанавливаете несколько параметров одновременно.

Если вы хотите проверить, какое свойство установлено в данный момент, вы бы использовали вариант 2-го варианта, просто опустите значение.

var color = $("div#mydiv").css('background-color');

Сделал бы переменную color равной red, если вы уже установили ее, например, выше.

Вы также можете добавлять и удалять классы, делая что-то вроде

$(selector).addClass(class_name);
$(selector).removeClass(class_name);

Answer 2

Этот ответ работает даже без jQuery.

Итак, у вас есть что-то вроде этого:

<style type="text/css">
    .foo { color: Red; }
    .bar { color: Blue; }
</style>
<div class="foo" id="redtext"> some red text here </div>

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

var div = document.getElementById('redtext');

, а затем измените прикрепленный цветовой стиль на

div.style.color = 'Green';

Вместо этого ваш красный текст будет отображаться зеленым цветом.

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

div.className = 'bar';

теперь для создания div используется панель классов, которая делает ваш ранее зеленый текст синим.

Answer 3

Существует несколько способов манипулировать стилями элементов с помощью инфраструктуры jQuery. Просмотрите документацию, касающуюся CSS и изменения атрибутов:

• http://docs.jquery.com/Attributes/addClass#class
• http://docs.jquery.com/CSS

Answer 4

Попробуйте это. Это код JQuery.

 $("myDiv").css({"color":"red","display":"block"})

Если вы используете vanila javacript, попробуйте это.

var myDiv = document,getElementById("myDiv");

myDiv.style.display = "block";

myDiv.style.color = "red";