Есть ли какой-либо синтаксический способ в JQuery для определения нескольких атрибутов CSS, не строгая все вправо, как это:
$("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt");
Если у вас есть, скажем, 20 из них, ваш код будет трудно читать, любые решения?
Из jQuery API, например, jQuery понимает и возвращает правильное значение для
.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" })
и
.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }).
Обратите внимание, что в нотации DOM кавычки вокруг имен свойств являются необязательными, но с обозначением CSS они требуются из-за дефиса в имени. - zanetu S
лучше просто использовать . addClass, даже если у вас есть 1 или больше. Более удобная и понятная.
Если у вас действительно есть желание сделать несколько реквизитов css, используйте
NB Любые реквизиты css с дефисом должны быть указаны.
.css({
'font-size' : '10px',
'width' : '30px',
'height' : '10px'
});
Я разместил кавычки, поэтому никто не должен будет разъяснять это, и код будет на 100% функциональным.
передать ему объект json:
$(....).css({
'property': 'value',
'property': 'value'
});
$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });
Используя простой объект, вы можете соединить строки, которые представляют имена свойств с их соответствующими значениями. Например, изменение цвета фона и смещение текста будет выглядеть следующим образом:
$("#message").css({
"background-color": "#0F0",
"font-weight" : "bolder"
});
Кроме того, вы также можете использовать имена свойств JavaScript:
$("#message").css({
backgroundColor: "rgb(128, 115, 94)",
fontWeight : "700"
});
Более подробную информацию можно найти в документации jQuery.
попробуйте это,
$(document).ready(function(){
$('#message').css({"color":"red","font-family":"verdana"});
})
Вы также можете использовать attr
вместе с style
:
$('#message').attr("style", "width:550; height:300; font-size:8px" );
Согласитесь с redsquare, однако стоит упомянуть, что если у вас есть свойство с двумя словами, например text-align
, вы сделаете следующее:
$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});
Попробуйте это
$(element).css({
"propertyName1":"propertyValue1",
"propertyName2":"propertyValue2"
})
$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});
Кроме того, может быть лучше использовать jQuery, встроенный в addClass
, чтобы сделать ваш проект более масштабируемым.
Вы можете попробовать это
$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");
Лучший способ использования переменной
var style1 = {
'font-size' : '10px',
'width' : '30px',
'height' : '10px'
};
$("#message").css(style1);