beget banner 468x60beget banner 728x90beget banner 930x180flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180

Руководство по получению и установке CSS-свойств в jQuery

jQuery-метод css() используется для получения вычисленного значения CSS-свойства или для установки одного или нескольких CSS-свойств для выбранных элементов.

Этот метод обеспечивает быстрый способ применения стилей непосредственно к строчным HTML-элементам, которые не были или не могут быть определены в таблице стилей.

Как получить значение свойства с помощью метода css()

Вы можете получить вычисленное значение CSS-свойства элемента, просто передав имя свойства в качестве параметра методу css(). Вот основной синтаксис:

$(selector).css("propertyName");

В следующем примере будет извлечено и отображено вычисленное значение CSS-свойства background-color элемента <div> при клике.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style>
    div{
        width: 100px;
        height: 100px;        
        display: inline-block;
        margin: 10px;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("div").click(function(){
        var color = $(this).css("background-color");
        $("#result").html(color);
    });    
});
</script>
</head>
<body>
    <div style="background-color:orange;"></div>
    <div style="background-color:#ee82ee;"></div>
    <div style="background-color:rgb(139,205,50);"></div>
    <div style="background-color:#f00;"></div>
    <p>Вычисленное значение свойства background-color выбранного элемента DIV:: <b id="result"></b></p>
</body>
</html>

Как установить CSS-свойство с помощью метода css()

Метод css() может принимать имя и значение свойства как отдельные параметры для установки одного CSS-свойства для элементов. Основной синтаксис:

$(selector).css("propertyName", "value");

В следующем примере будет установлено CSS-свойство background-color элементов <div>, при значении цвета blue при клике.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style>
    .box{
        width: 100px;
        height: 100px;
        display: inline-block;        
        border: 1px solid #cdcdcd;
        margin: 10px;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $(".box").click(function(){
        $(this).css("background-color", "blue");
    });    
});
</script>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

Установить несколько CSS-свойств и значений с помощью метода css()

Вы также можете установить несколько CSS-свойств с помощью метода css(). Основной синтаксис для установки более чем одного свойства для элементов может быть задан с помощью:

$(selector).css({"propertyName":"value", "propertyName":"value", ...});

В следующем примере будет заданы CSS-свойства background-color и padding для выбранных элементов одновременно.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style>
    p{
        font-size: 18px;
        font-family: Arial, sans-serif;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").css({"background-color": "yellow", "padding": "20px"});
    });    
});
</script>
</head>
<body>
    <h1>Это заголовок</h1>
    <p style="background-color:orange;">Это параграф.</p>
    <p style="background-color:#ee82ee;">Это другой параграф.</p>
    <p style="background-color:rgb(139,205,50);">Это еще один параграф.</p>
    <p>Это последний параграф.</p>
    <button type="button">Добавить CSS-стили</button>
</body>
</html>
jivo banner 480x320jivo banner 728x90jivo banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…
Подробнее

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…
Подробнее

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…
Подробнее