Как изменить 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');

Сделал бы var 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";