jQuery를 사용하여 텍스트 정렬 스타일을 동적으로 추가하는 방법
CSS 2.1 주변의 일반적인 IE 버그를 수정하려고 하는데 사용자 지정 텍스트 정렬 스타일을 추가하기 위해 요소 스타일 속성을 변경하는 방법이 필요합니다.
현재 jQuery에서는 다음과 같은 일을 할 수 있습니다.
$(this).width() or $(this).height()
하지만 이와 같은 접근 방식으로 텍스트 정렬을 변경할 수 있는 좋은 방법을 찾을 수 없는 것 같습니다.
그 아이템은 이미 클래스가 있는데 그 클래스에 텍스트 정렬을 해놓았는데 운이 없었습니다.클래스가 정의된 후에 이 요소에 텍스트 정렬 CSS 속성을 추가할 수 있습니까?
이런 거 있어요.
$(this).css("text-align", "center");
폭을 조정한 직후에 파이어버그에서 이것을 본 후에 스타일에 설정된 속성은 "폭"뿐입니다.도와줄 사람?
편집:
이 질문에 대단한 대답을 하네요!당면한 문제에 대한 좀 더 자세한 설명:
jqGrid A3.5에 대한 js 소스를 조정하여 사용자 지정 하위 그리드 작업을 수행하고 있으며 조정 중인 실제 JS는 아래에 나와 있습니다(위의 예제에서 "이것"을 사용하여 죄송합니다만 간략하게 설명하고 싶었습니다).
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');
그리고 파이어버그랑 작업한지 얼마 안됐는데 html 말고 dom을 보고 있나요?당신의 소스는 자바스크립트로 변경되지 않지만 돔은.돔 탭에서 변경이 적용되었는지 확인합니다.
요소에 인라인 스타일을 추가하기 위해 다음을 시도할 수도 있습니다.
$(this).attr('style', 'text-align: center');
이를 통해 다른 스타일링 규칙이 효과가 있을 것으로 생각했던 것을 우선하지 않도록 해야 합니다.보통 인라인 스타일이 우선이라고 생각합니다.
편집: 또한 여러분에게 도움이 될 수 있는 또 다른 도구는 재시(http://www.billyreisinger.com/jash/) 입니다.자바스크립트 명령 프롬프트를 제공하여 쉽게 자바스크립트 문을 테스트하고 올바른 요소를 선택하는지 확인할 수 있습니다.
주로 사용합니다.
$(this).css({
"textAlign":"center",
"secondCSSProperty":"value"
});
도움이 되기를 바랍니다.
텍스트 정렬 대신 텍스트 정렬을 사용해야 한다고 생각합니다.
재밌는.제가 테스트 버전을 작성했을 때 당신과 같은 문제가 생겼습니다.
해결책은 jquery의 체인 기능을 사용하여 다음과 같은 작업을 수행하는 것입니다.
$(this).width(500).css("text-align", "center");
흥미로운 발견이네요.
약간 확장하려면 다음이 작동하지 않습니다.
$(this).width(500);
$(this).css("text-align", "center");
스타일에 너비만 설정됩니다.위에서 제시한 대로 두 가지를 연결하는 것이 효과가 있을 것으로 보입니다.
$(this).css("text-align", "center");'이 이것'이 실제로 텍스트 align 스타일을 설정하려는 요소인지 확인하십시오.
맞습니까?
<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>
텍스트 상자의 중심을 설정하는 방법
언급URL : https://stackoverflow.com/questions/883180/how-to-dynamically-add-a-style-for-text-align-using-jquery
'source' 카테고리의 다른 글
| Sqalchemy에서 열거를 하는 가장 좋은 방법은? (0) | 2023.10.18 |
|---|---|
| 각 줄의 텍스트 파일을 파워셸을 통해 배열로 저장하는 방법 (0) | 2023.10.18 |
| 스택 포인터 값 출력 (0) | 2023.10.18 |
| Windows에서 MySQL Workbench가 열리지 않음 (0) | 2023.10.08 |
| Android에서 상대 레이아웃의 Z 순서 보기 정의 (0) | 2023.10.08 |