programing

jQuery를 사용하여 CSS를 변경하는 방법?

muds 2023. 9. 23. 23:10
반응형

jQuery를 사용하여 CSS를 변경하는 방법?

jQuery를 사용하여 CSS를 변경하려고 합니다.

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({"backgroundColor":"black","color":"white");
    $(".bordered").css("border", "1px solid black");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

내가 뭘 놓치고 있는 거지?

속성 이름이 문제라고 제안하는 사용자는 무시합니다.jQuery API 설명서에는 두 가지 표기법 중 하나라도 허용됨을 명시적으로 명시하고 있습니다. http://api.jquery.com/css/

실제 문제는 이 선에 닫히는 곱슬곱슬한 중괄호가 없다는 것입니다.

$("#myParagraph").css({"backgroundColor":"black","color":"white");

다음 항목으로 변경:

$("#myParagraph").css({"backgroundColor": "black", "color": "white"});

다음은 작업 데모입니다. http://jsfiddle.net/YPYz8/

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });
    $(".bordered").css("border", "1px solid black");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

다음 중 하나를 수행할 수 있습니다.

$("h1").css("background-color", "yellow");

또는:

$("h1").css({backgroundColor: "yellow"});

답변 중 일부에서 잘못된 정보를 제공하고 있으므로 상황을 조금 정리합니다.

jQuery .css() 메서드는 많은 경우에 DOM 또는 CSS 표기법을 사용할 수 있습니다.그래서 둘다backgroundColor그리고.background-color일을 끝낼 겁니다

.css()주장을 사용하면 주장이 무엇이 될 수 있는지에 대한 두 가지 선택 사항이 있습니다.CSS 속성과 값을 나타내는 2개의 쉼표로 구분된 문자열이거나 CSS 속성과 값의 키 값 쌍을 하나 이상 포함하는 자바스크립트 객체일 수 있습니다.

가 있는 것은 입니다가 된 것뿐입니다.}과 같습니다 행은 다음과 같이 표시되어야 합니다.

$("#myParagraph").css({"backgroundColor":"black","color":"white"});

뺄 수 는 에서 뺄 수 backgroundColor그리고.color. 사용하는 경우background-color하이픈 때문에 따옴표를 붙여야 합니다.

일반적으로 기존 키워드를 인용하지 않으면 문제가 발생할 수 있기 때문에 자바스크립트 객체를 인용하는 것이 좋습니다.

마지막으로, jQuery.ready() 메서드에 대한 것입니다.

$(handler);

는 다음과 동의어입니다.

$(document).ready(handler);

권장하지 않는 3번째 양식과 함께.

은.$(init)다 이후로 init그 사건의 처리자입니다 그래서,initDOM이 구성되면 실행됩니다.

.css()메소드는 CSS 속성을 찾고 설정하는 것을 매우 간단하게 해주며 .animate()와 같은 다른 메소드와 결합하여 사이트에서 멋진 효과를 만들 수 있습니다.

로는.css()method는 특정 일치된 요소 집합에 대해 단일 CSS 속성을 설정할 수 있습니다.속성과 값을 문자열로 전달하면 요소의 CSS 속성이 변경됩니다.

$('.example').css('background-color', 'red');

이렇게 하면 'example' 클래스가 있는 모든 요소에 대해 'background-color' 속성이 'red'로 설정됩니다.

그러나 한 번에 한 개의 재산만 바꾸는 것에 국한되지는 않습니다.물론, 한 번에 하나의 속성만 변경하는 동일한 jQuery 개체를 여러 개 추가할 수 있지만, 이는 DOM에 불필요한 여러 호출을 수행하고 반복되는 코드입니다.

대신에, 당신은 통과할 수 있습니다..css()속성과 값을 키/값 쌍으로 포함하는 자바스크립트 객체 method.그러면 각 속성이 jQuery 개체에 한 번에 설정됩니다.

$('.example').css({
    'background-color': 'red',
    'border' : '1px solid red',
    'color' : 'white',
    'font-size': '32px',
    'text-align' : 'center',
    'display' : 'inline-block'
});

그러면 '.example' 요소의 이러한 CSS 속성이 모두 변경됩니다.

jQuery와 함께 Multiple css 속성을 사용할 경우 시작과 끝에 컬리 브레이스를 사용해야 합니다.끝 곱슬곱슬한 중괄호가 없습니다.

function init() {
 $("h1").css("backgroundColor", "yellow");

 $("#myParagraph").css({"background-color":"black","color":"white"});

 $(".bordered").css("border", "1px solid black");
}

이 jQuery CSS Selector 튜토리얼을 보실 수 있습니다.

 If you have one css:

   $("p").css("background-color": "pink");

If you have more than one css: 

  $("p").css({"background-color": "pink", "font-size": "200%"});

Or you can use:

var style ="background-color:red;";
$("p").attr("style", style);

CSS 메소드로 값에 숫자를 사용할 때 아포스트로피 밖에 숫자를 추가한 다음 아포스트로피에 CSS 유닛을 추가해야 한다는 것을 추가하고 싶었습니다.

$('.block').css('width',50 + '%');

아니면

var $block = $('.block')    

$block.css({ 'width': 50 + '%', 'height': 4 + 'em', 'background': '#FFDAB9' });

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
         $('h1').css('color','#3498db');
      });
    </script>
    <style>
      .wrapper{
        height:450px;
        background:#ededed;
        text-align:center
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Title</h1>
    </div>
  </body>
</html>

$(.radioValue).css({"background-color":-"-webkit-linear-gradient(#e9e9e9,rgba(255,255,0.43137254901960786),#e9e9e9)","color":"#454545","패딩":"8px"});

$(function(){ 
$('.bordered').css({
"border":"1px solid #EFEFEF",
"margin":"0 auto",
"width":"80%"
});

$('h1').css({
"margin-left":"10px"
});

$('#myParagraph').css({
"margin-left":"10px",
"font-family":"sans-serif"
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
<h1>Header</h1>
<p id="myParagraph">This is some paragraph text</p>
</div>

잘못된 코드:$("#myParagraph").css({"backgroundColor":"black","color":"white");

그것의 행방불명"}"끝나고white"

이것으로 바꿉니다.

 $("#myParagraph").css({"background-color":"black","color":"white"});

언급URL : https://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery

반응형

'programing' 카테고리의 다른 글

mysql-community-server를 설치하는 동안 GPG 키 문제가 발생  (0) 2023.09.23
scanf를 사용하여 공백으로 구분된 숫자를 읽는 방법  (0) 2023.09.23
Windows Forms C# 응용프로그램에서 구성 파일을 가지는 가장 간단한 방법  (0) 2023.09.23
"No module: ngResource"(모듈 없음: ngResource)라는 오류가 표시됩니다.  (0) 2023.09.23
맥에서 libmysqlclient15-dev?  (0) 2023.09.23

'programing'의 다른글

  • 현재글jQuery를 사용하여 CSS를 변경하는 방법?

관련글

댓글

티스토리툴바