Добавлена в версию: 1.0
Возвращает свойство стиля для первого совпавшего элемента.
Сокращения свойств CSS (например, margin, background, border) не поддерживаются. Например, если необходимо получить значения margin, то используйте:
$(elem).css('marginTop') и $(elem).css('marginRight'), и т.д.
Примеры
Пример 1
Получает доступ к цвету фона элемента div на котором пользователь кликнул мышкой.Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ $("div").click(function () { var color = $(this).css("background-color"); $("#result").html("That div is <span style='color:" + color + ";'>" + color + "</span>."); }); }); </script> <style> div { width:60px; height:60px; margin:5px; float:left; } </style> </head> <body> <span id="result"> </span> <div style="background-color:blue;"></div> <div style="background-color:rgb(15,99,30);"></div> <div style="background-color:#123456;"></div> <div style="background-color:#f11;"></div> </body> </html>
Добавлена в версию: 1.0
Устанавливает свойства стиля css всех элементов набора, используя при этом объект, который содержит пары ключ/значение.
Это лучший способ указать большое количество свойств стиля для каждого совпавшего элемента.
Имейте в виду, что если ключ содержит дефис, к примеру, «background-color», то значение должно либо заключаться в кавычки, либо указываться следующим образом (camel case): backgroundColor. Поскольку «float» и «class» являются зарезервированными словами в JavaScript, то их рекомендуется всегда брать в кавычки. jQuery нормализирует свойство «opacity» в браузере Internet Explorer.Примеры
Пример 1
Устанавливает цвет текста всех параграфов и цвет фона: $("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ $("p").hover(function () { $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'}); }, function () { var cssObj = { 'background-color' : '#ddd', 'font-weight' : '', 'color' : 'rgb(0,40,244)' } $(this).css(cssObj); }); }); </script> <style> p { color:green; } </style> </head> <body> <p> Move the mouse over a paragraph. </p> <p> Like this one or the one above. </p> </body> </html>
Пример 2
Если имя свойства включает в себя «-», то заключайте его в двойные кавычки. $("p").hover(function () {
$(this).css({ "background-color":"yellow", "font-weight":"bolder" });
}, function () {
var cssObj = {
"background-color": "#ddd",
"font-weight": "",
color: "rgb(0,40,244)"
}
$(this).css(cssObj);
});
Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ $("p").hover(function () { $(this).css({ "background-color":"yellow", "font-weight":"bolder" }); }, function () { var cssObj = { "background-color": "#ddd", "font-weight": "", color: "rgb(0,40,244)" } $(this).css(cssObj); }); }); </script> <style> p { color:green; } </style> </head> <body> <p> Move the mouse over a paragraph. </p> <p> Like this one or the one above. </p> </body> </html>
Добавлена в версию: 1.0
Устанавливает значение одного свойства стиля css для всех элементов набора.
Если указывается число, то оно автоматически конвертируется в значение в пикселях, со следующими исключениями: z-index, font-weight, opacity, zoom and line-height.
Для того, чтобы удалить свойство из элемента используйте значение с пустой строкой.
Примеры
Пример 1
При прохождении курсора над текстом изменяет его цвет на красный.Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ $("p").mouseover(function () { $(this).css("color","red"); }); }); </script> <style> p { color:blue; width:200px; font-size:14px; } </style> </head> <body> <p> Just roll the mouse over me. </p> <p> Or me to see a color change. </p> </body> </html>
Пример 2
Выделяет слово в параграфе на котором пользователь кликнул мышкой.Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> <script> $(document).ready(function(){ var words = $("p:first").text().split(" "); var text = words.join("</span> <span>"); $("p:first").html("<span>" + text + "</span>"); $("span").click(function () { $(this).css("background-color","yellow"); }); }); </script> <style> p { color:blue; font-weight:bold; cursor:pointer; } </style> </head> <body> <p> Once upon a time there was a man who lived in a pizza parlor. This man just loved pizza and ate it all the time. He went on to be the happiest man in the world. The end. </p> </body> </html>
Была ли эта информация полезной?
