[JQUERY] 어떻게 jQuery를 여러 CSS 속성을 정의?

어떻게 jQuery를 여러 CSS 속성을 정의?

해결법

1. ---

   1.더 나은 그냥 당신이 변화에 1 개 이상의 스타일을 경우에도) .addClass ()와 .removeClass를 (사용합니다. 그것은 더 유지 보수 읽을 수 있습니다.

   더 나은 그냥 당신이 변화에 1 개 이상의 스타일을 경우에도) .addClass ()와 .removeClass를 (사용합니다. 그것은 더 유지 보수 읽을 수 있습니다.

   당신이 정말로 여러 CSS 속성을 할 수있는 충동을 가지고 있다면, 다음을 사용 :

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

   NB! 하이픈 필요성이있는 모든 CSS 속성은 인용한다. 아무도 그것을 명확히 할 필요가 없습니다 그래서 따옴표를 배치했습니다, 그리고 코드는 100 % 작동 될 것입니다.

2. ---

   2.객체로 전달합니다

   객체로 전달합니다

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

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

3. ---

   3.

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

4. ---

   4.일반 객체를 사용하여 해당 값과 속성 이름을 나타내는 문자열을 쌍을 수 있습니다. 다음과 같을 것입니다 예를 들어, 배경색을 변경하고 텍스트 대담을 :

   일반 객체를 사용하여 해당 값과 속성 이름을 나타내는 문자열을 쌍을 수 있습니다. 다음과 같을 것입니다 예를 들어, 배경색을 변경하고 텍스트 대담을 :

   $("#message").css({
       "background-color": "#0F0", 
       "font-weight"     : "bolder"
   });
   

   양자 택일로, 당신은 너무 자바 스크립트 속성 이름을 사용할 수 있습니다 :

   $("#message").css({
       backgroundColor: "rgb(128, 115, 94)",
       fontWeight     : "700"
   });
   

   자세한 내용은 jQuery의 문서에서 찾을 수 있습니다.

5. ---

   5.이것을 시도하십시오

   이것을 시도하십시오

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

6. ---

   6.또한 스타일과 함께 ATTR 사용할 수 있습니다 :

   또한 스타일과 함께 ATTR 사용할 수 있습니다 :

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

7. ---

   7.당신이 텍스트 정렬과 같은 두 단어 속성이있는 경우이 작업을 수행 할 것이라고 언급 할 가치가있다 그러나 redsquare 동의합니다 :

   당신이 텍스트 정렬과 같은 두 단어 속성이있는 경우이 작업을 수행 할 것이라고 언급 할 가치가있다 그러나 redsquare 동의합니다 :

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

8. ---

   8.

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

   또한, 프로젝트가 더 확장하기 위해 jQuery의 addClass 내장을 사용하는 것이 더있을 수 있습니다.

   출처 : jQuery를 CSS를 추가하고 CSS를 제거하려면 어떻게

9. ---

   9.이 시도

   이 시도

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

10. ---

    10.스크립트

    스크립트

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

    html로

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

11. ---

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

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

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

12. ---

    12.당신이 시도 할 수 있습니다

    당신이 시도 할 수 있습니다

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

13. ---

    13.그런 다음 여러 CSS를 변경하는 속성을 원하는 경우 다음과 같이 객체 구조를 사용해야합니다 :

    그런 다음 여러 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');
    });
    

    당신은 당신이 .toggleClass을 사용할 수 있습니다 ( '사용자 지정 수준') 뭔가의 onclick을 일부 CSS를 추가 할 및 후자의 예에서 다음 두 번째 클릭에 그 CSS를 제거하려면 전 이상 후자의 예를 하나의 장점은

    이전의 예에서 당신은 당신이 이전에 설정 한 값이 다른 모든 CSS를 설정해야하고이 복잡 할 곳, 그래서 클래스 옵션을 사용하여 더 나은 솔루션이 될 것입니다.

14. ---

    14.당신이 사용할 수있는

    당신이 사용할 수있는

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

    가장 좋은 방법은 $ ( '선택')를 사용하는 것입니다. addClass ( '사용자 지정 수준') 및

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

from https://stackoverflow.com/questions/447197/how-to-define-multiple-css-attributes-in-jquery by cc-by-sa and MIT license