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 속성 및 값의 하나 이상의 키 값 쌍을 포함하는 Javascript 객체 일 수 있습니다.
결론적으로 코드에서 잘못된 것은 유실 }입니다. 줄은 다음과 같아야합니다.
$("#myParagraph").css({"backgroundColor":"black","color":"white"});당신은 중괄호를 생략 할 수는 없지만 각국에서 따옴표를 떠날 수 backgroundColor와 color. 사용하는 경우 background-color하이픈으로 인해 따옴표를 묶어야합니다.
일반적으로 기존 키워드를 인용하지 않으면 문제가 발생할 수 있으므로 Javascript 객체를 인용하는 것이 좋습니다 .
마지막으로 jQuery .ready () 메소드에 대해
$(handler);이다 동의어 로 :
$(document).ready(handler);권장하지 않는 세 번째 양식과 함께.
이는 해당 인스턴스의 핸들러 $(init)이기 때문에 완전히 정확함을 의미 init합니다. 따라서 initDOM이 생성되면 시작됩니다.
답변
jQuery와 함께 다중 CSS 속성을 사용하는 경우 시작 및 끝에 중괄호를 사용해야합니다. 끝 중괄호가 없습니다.
function init() {
$("h1").css("backgroundColor", "yellow");
$("#myParagraph").css({"background-color":"black","color":"white"});
$(".bordered").css("border", "1px solid black");
}이 jQuery CSS 선택기 튜토리얼을 살펴볼 수 있습니다 .
답변
이 .css()메소드를 사용하면 CSS 속성을 쉽게 찾아 설정하고 .animate ()와 같은 다른 메소드와 결합하여 사이트에 멋진 효과를 줄 수 있습니다.
가장 간단한 형식으로,이 .css()메소드는 특정 일치하는 요소 세트에 대해 단일 CSS 특성을 설정할 수 있습니다. 속성과 값을 문자열로 전달하면 요소의 CSS 속성이 변경됩니다.
$('.example').css('background-color', 'red');
‘example’클래스를 가진 모든 요소에 대해 ‘background-color’속성을 ‘red’로 설정합니다.
그러나 한 번에 하나의 속성 만 변경하는 것에 국한되지 않습니다. 물론, 한 번에 하나의 속성 만 변경하는 여러 개의 동일한 jQuery 객체를 추가 할 수 있지만, 이는 DOM에 대한 불필요한 호출을 여러 번 수행하며 반복되는 코드가 많습니다.
대신 .css()속성과 값을 키 / 값 쌍으로 포함하는 Javascript 객체를 메서드에 전달할 수 있습니다 . 이렇게하면 각 속성이 jQuery 객체에서 한 번에 설정됩니다.
$('.example').css({
'background-color': 'red',
'border' : '1px solid red',
'color' : 'white',
'font-size': '32px',
'text-align' : 'center',
'display' : 'inline-block'
});이렇게하면 ‘.example’요소에서 이러한 모든 CSS 속성이 변경됩니다.
답변
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>