복붙노트

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

JQUERY

어떻게 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;
    }
    
  15. from https://stackoverflow.com/questions/447197/how-to-define-multiple-css-attributes-in-jquery by cc-by-sa and MIT license