Как изменить свойства css элементов html с помощью javascript или jquery

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

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

Проверьте документация 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');

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

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

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

Этот ответ работает даже без 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 использует панель классов, что делает ваш ранее зеленый текст синим.

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

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

Если вы используете ванильный javascript, попробуйте это.

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

myDiv.style.display = "block";

myDiv.style.color = "red";