jQuery에서 여러 CSS 속성을 어떻게 정의합니까?

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 표기법에서는 이름의 하이픈 때문에 따옴표가 필요합니다.

하나 이상의 스타일을 변경하더라도 그냥 사용하는 것이 좋습니다.더 유지 관리가 가능하고 읽기 쉽습니다.

여러 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의 설명서에서 확인할 수 있습니다.

이것 좀 드셔보세요.

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

사용할 수도 있습니다.attr와 함께style:

$('#message').attr("style", "width:550; height:300; font-size:8px" );

빨간 사각형에 동의하지만 만약 당신이 두 단어 속성을 가지고 있다면 언급할 가치가 있습니다.text-align다음과 같은 작업을 수행할 수:

$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});

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

또한 jQuery의 기본 제공 기능을 사용하는 것이 더 나을 수 있습니다.addClass프로젝트의 확장성을 향상시킬 수 있습니다.

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

가장 좋은 방법은 변수를 사용하는 것입니다.

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

사용해 보세요.

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

여러 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');
});

전자에 비해 후자의 예제의 한 가지 장점은 CSS를 추가하고 싶은 경우입니다.onclick어떤 것의 그리고 두 번째 클릭으로 그 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;
}

언급URL : https://stackoverflow.com/questions/447197/how-to-define-multiple-css-attributes-in-jquery