jQuery를 사용하여 텍스트 정렬에 대한 스타일을 동적으로 추가하는 방법
https://stackoverflow.com/questions/883180
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
CSS 2.1 주변의 일반적인 IE 버그를 수정하려고 노력하고 있으며 사용자 정의 텍스트 정렬 스타일을 추가하기 위해 요소 스타일 속성을 변경하는 방법이 필요합니다.
현재 jQuery에서 당신은 같은 일을 할 수 있습니다
$(this).width() or $(this).height()
그러나 나는이 같은 접근법으로 텍스트 정렬을 변경하는 좋은 방법을 찾을 수없는 것 같습니다.
항목에는 이미 수업이 있으며 운이없는 클래스에서 텍스트 정렬을 설정했습니다. 클래스가 정의 된 후이 요소에 텍스트-정렬 CSS 속성을 추가 할 수 있습니까?
나는 이런 것이있다
$(this).css("text-align", "center");
너비 조정 직후와 Firebug에서 이것을 본 후에는 "너비"만이 스타일의 유일한 속성입니다. 도움이 있습니까?
편집하다:
우와 -이 질문에 대한 큰 응답! 당면한 문제에 대한 자세한 내용 :
JS 소스를 조정하고 있습니다 JQGRID A3.5 사용자 정의 서브 그리드 작업을 수행하고 실제 JS가 아래에 표시되어 있습니다 (위의 예에서 "this"를 사용해 주셔서 죄송하지만 간단한 간단한 정보를 유지하고 싶었습니다).
var subGridJson = function(sjxml, sbid) {
var tbl, trdiv, tddiv, result = "", i, cur, sgmap,
dummy = document.createElement("table");
tbl = document.createElement("tbody");
$(dummy).attr({ cellSpacing: "0", cellPadding: "0", border: "0" });
trdiv = document.createElement("tr");
for (i = 0; i < ts.p.subGridModel[0].name.length; i++) {
tddiv = document.createElement("th");
tddiv.className = "ui-state-default ui-th-column";
$(tddiv).html(ts.p.subGridModel[0].name[i]);
$(tddiv).width(ts.p.subGridModel[0].width[i]);
trdiv.appendChild(tddiv);
}
tbl.appendChild(trdiv);
}
나는 아래의 두 가지를 시도한 답변에서 모두 운이 없었습니다.
$(tddiv).width(ts.p.subGridModel[0].width[i]).attr('style', 'text-align: center');
그리고
$(tddiv).width(ts.p.subGridModel[0].width[i]).css('text-align', 'center');
나는 오늘이 문제에 대해 계속 노력 하고이 이상한 문제에 대한 나의 고통을 느끼는 모든 사람을위한 최종 해결책을 게시 할 것입니다.
해결책
문서화가 보여 주듯이 올바른 아이디어가 있습니다.
http://docs.jquery.com/css/css#namevalue
클래스 나 ID로 이것을 정확하게 식별한다고 확신하십니까?
예를 들어, 수업이 myelementclass 인 경우
$('.myElementClass').css('text-align','center');
또한, 나는 한동안 Firebug와 함께 일하지 않았지만 HTML이 아닌 DOM을보고 있습니까? 귀하의 소스는 JavaScript에 의해 변경되지 않았지만 DOM은입니다. DOM 탭을보고 변경 사항이 적용되었는지 확인하십시오.
다른 팁
요소에 인라인 스타일을 추가하려면 다음을 시도 할 수도 있습니다.
$(this).attr('style', 'text-align: center');
이것은 다른 스타일링 규칙이 당신이 생각했던 것을 무시하지 않도록해야합니다. 나는 인라인 스타일이 보통 우선한다고 믿는다.
편집하다:또한 당신을 도울 수있는 또 다른 도구는 Jash입니다.http://www.billyreinger.com/jash/). JavaScript 명령 프롬프트가 제공되므로 JavaScript 문을 쉽게 테스트하고 올바른 요소를 선택할 수 있는지 확인할 수 있습니다.
나는 보통 사용합니다
$(this).css({
"textAlign":"center",
"secondCSSProperty":"value"
});
도움이되기를 바랍니다
나는 당신이 "텍스트-정렬"대신 "textalign"을 사용해야한다고 생각합니다.
흥미로운. 테스트 버전을 썼을 때와 같은 문제가 생겼습니다.
해결책은 jQuery의 능력을 사용하는 것입니다 체인 그리고 할 :
$(this).width(500).css("text-align", "center");
그래도 흥미로운 찾기.
약간 확장하기 위해 다음은 다음과 같습니다 ~ 아니다 일하다
$(this).width(500);
$(this).css("text-align", "center");
그리고 스타일에 설정되는 너비 만 결과. 위에서 제안한 것처럼 두 가지를 체인하는 것은 효과가있는 것 같습니다.
$(this).css("text-align", "center"); 작동하면 'this'가 실제로 텍스트 정렬 스타일을 설정하려는 요소인지 확인하십시오.
맞다?
<script>
$( "#box" ).one( "click", function() {
$( this ).css( "width", "+=200" );
});
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$this = $('h1');
$this.css('color','#3498db');
$this.css('text-align','center');
$this.css('border','1px solid #ededed');
});
</script>
</head>
<body>
<h1>Title</h1>
</body>
</html>
$(this).css({'text-align':'center'});
이 대신 클래스 이름과 ID를 사용할 수 있습니다.
$('.classname').css({'text-align':'center'});
또는
$('#id').css({'text-align':'center'});
텍스트 상자의 중심을 설정하는 방법
아래가 HTML 단락 태그라고 가정합니다.
<p style="background-color:#ff0000">This is a paragraph.</p>
그리고 우리는 jQuery의 단락 색상을 변경하고 싶습니다.
클라이언트 측 코드는 다음과 같습니다.
<script>
$(document).ready(function(){
$("p").css("background-color", "yellow");
});
</script>
