jQuery에서 여러 CSS 속성을 정의하는 방법은 무엇입니까?

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 표기법 에서는 이름의 하이픈으로 인해 필요합니다 .

.addClass()1 개 이상이라도 사용 하는 것이 좋습니다. 보다 유지 관리 가능하고 읽기 쉽습니다.

실제로 여러 CSS 속성을 수행하려는 충동이 있다면 다음을 사용하십시오.

.css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

NB! 하이픈
이있는 CSS 속성은 따옴표로 묶어야합니다. 나는 따옴표를 붙여서 아무도 그것을 명확히 할 필요가 없으며 코드는 100 % 작동합니다.

객체로 전달하십시오.

$(....).css({
    'property': 'value', 
    'property': 'value'
});

http://docs.jquery.com/CSS/css#properties

$('#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의 documentation 에서 찾을 수 있습니다 .

이것을 시도하십시오

$(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'});

$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

또한 addClass프로젝트 확장 성을 높이기 위해 jQuery 내장 기능을 사용하는 것이 좋습니다 .

출처 : 방법 : jQuery CSS 추가 및 CSS 제거

이 시도

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})

스크립트

 $(IDname).css({
    "background":"#000",
    "color":"#000"
})

HTML

<div id="hello"></div>

당신은 이것을 시도 할 수 있습니다

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");

변수를 사용하는 가장 좋은 방법

var style1 = {
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
};
$("#message").css(style1);

여러 CSS 속성을 변경하려면 다음 과 같이 객체 구조 를 사용해야 합니다 .

$(document).ready(function(){
   $('#message').css({
                   "background-color": "#0F0",
                   "color":"red",
                   "font-family":"verdana"
                });
});

그러나 우리가 많은 스타일 을 변경 하고 싶을 때 악화 됩니다 . 따라서 jQuery를 사용하여 CSS를 변경하는 대신 클래스를 추가하고 클래스를 추가하는 것이 더 읽기 쉽습니다.

아래 예를 참조하십시오.

CSS

<style>
    .custom-class{
       font-weight: bold;
       background: #f5f5f5;
       text-align: center;
       font-size: 18px;
       color:red;
    }
</style>

jQuery

$(document).ready(function(){
   $('#message').addclass('custom-class');
});

전자보다 후자의 예의 한 가지 장점은 onclick무언가의 CSS를 추가 하고 두 번째 클릭으로 해당 CSS를 제거하려는 경우 후자의 예에서 사용할 수 있다는 것입니다.toggleClass('custom-class')

이전 예제에서는 이전에 설정 한 다른 값으로 모든 CSS를 설정해야하며 복잡하므로 클래스 옵션을 사용하는 것이 더 좋습니다.

당신이 사용할 수있는

$('selector').css({'width:'16px', 'color': 'green', 'margin': '0'});

가장 좋은 방법은 $ ( 'selector'). addClass ( 'custom-class')를 사용하는 것입니다.

.custom-class{
width:16px,
color: green;
margin: 0;
}