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>

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

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

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

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