jQuery를 사용하여 텍스트 정렬을위한 스타일을 동적으로 추가하는 방법


81

CSS 2.1 주변의 일반적인 IE 버그를 수정하려고하고 있으며 사용자 지정 텍스트 정렬 스타일을 추가하기 위해 요소 스타일 속성을 변경하는 방법이 필요합니다.

현재 jQuery에서 다음과 같이 할 수 있습니다.

$(this).width() or $(this).height() 

그러나 동일한 접근 방식으로 텍스트 정렬을 변경하는 좋은 방법을 찾을 수없는 것 같습니다.

항목에 이미 클래스가 있으며 해당 클래스에서 운없이 텍스트 정렬을 설정했습니다. 클래스가 정의 된 후이 요소에 텍스트 정렬 CSS 속성을 추가하는 것이 가능합니까?

이런거 있어요

$(this).css("text-align", "center"); 

폭 조정 직후와 방화범에서 이것을 본 후에는 "width"만 스타일에 설정된 유일한 속성임을 알 수 있습니다. 도움이 필요하세요?

편집하다:

우와-이 질문에 대한 큰 응답! 당면한 문제에 대해 좀 더 자세히 설명합니다.

사용자 지정 하위 그리드 작업을 수행하기 위해 jqGrid A3.5 의 js 소스를 조정하고 있으며 조정중인 실제 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');

나는 오늘이 문제에 대해 계속 작업하고이 이상한 문제에 대해 내 고통을 느끼는 모든 사람을 위해 최종 해결책을 게시 할 것입니다.

답변:


166

문서에 표시된대로 올바른 아이디어가 있습니다.

http://docs.jquery.com/CSS/css#namevalue

클래스 또는 ID로 올바르게 식별하고 있습니까?

예를 들어, 클래스가 myElementClass 인 경우

$('.myElementClass').css('text-align','center');

또한 Firebug와 한동안 작업하지 않았지만 html이 아닌 dom을보고 있습니까? 소스는 자바 스크립트에 의해 변경되지 않지만 DOM은 변경됩니다. dom 탭에서 변경 사항이 적용되었는지 확인하십시오.


1
작동하지만 이전에 설정된 width ()와 함께 사용하면 실패하는 것 같습니다. 대답은 jquery 체인을 사용하는 것입니다.
Steerpike

42

다음을 시도하여 요소에 인라인 스타일을 추가 할 수도 있습니다.

$(this).attr('style', 'text-align: center');

이렇게하면 다른 스타일링 규칙이 작동 할 것이라고 생각한 것보다 우선하지 않도록해야합니다. 인라인 스타일이 일반적으로 우선권을 갖는다 고 생각합니다.

편집 : 또한 도움이 될 수있는 또 다른 도구는 Jash ( http://www.billyreisinger.com/jash/ )입니다. 자바 스크립트 명령 프롬프트를 제공하므로 자바 스크립트 문을 쉽게 테스트하고 올바른 요소 등을 선택하고 있는지 확인할 수 있습니다.


12

나는 보통 사용

$(this).css({
    "textAlign":"center",
    "secondCSSProperty":"value" 
});

도움이되는 희망


2

"text-align"대신 "textAlign"을 사용해야한다고 생각합니다.


6
이것은 바닐라 자바 ​​스크립트 DOM 조작을 사용하여 스타일을 설정하는 경우에만 해당됩니다. jQuery css ()는 대신 실제 CSS 키워드를 사용합니다.
garrow

2

흥미 롭군. 테스트 버전을 작성할 때 당신과 같은 문제가 발생했습니다.

해결책은 jquery의 기능을 연결 하고 수행하는 것입니다.

$(this).width(500).css("text-align", "center");

그래도 흥미로운 발견.

조금 확장하려면 다음이 작동 하지 않습니다.

$(this).width(500);
$(this).css("text-align", "center");

스타일에 너비가 설정됩니다. 위에서 제안했듯이 두 가지를 연결하는 것이 작동하는 것 같습니다.


1

$(this).css("text-align", "center"); 'this'가 실제로 텍스트 정렬 스타일을 설정하려는 요소인지 확인하십시오.


0

맞다?

<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>

0
<!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>

0
 $(this).css({'text-align':'center'}); 

대신 클래스 이름과 ID를 사용할 수 있습니다.

$('.classname').css({'text-align':'center'});

또는

$('#id').css({'text-align':'center'});

-1

아래가 html 단락 태그라고 가정합니다.

<p style="background-color:#ff0000">This is a paragraph.</p>

jquery에서 단락 색상을 변경하고 싶습니다.

클라이언트 측 코드는 다음과 같습니다.

<script>
$(document).ready(function(){
    $("p").css("background-color", "yellow");
});
</script> 

이것은 어떤 식 으로든 주어진 답변을 개선합니까?
Nico Haase

-1
function add_question () {var count = document.getElementById ( "nofquest"). value; var container = document.getElementById ( "container"); // 컨테이너의 이전 내용을 지 웁니다 while (container.hasChildNodes ()) {container.removeChild (container.lastChild); } for (i = 1; i

텍스트 상자의 중앙을 설정하는 방법


1. 서식 2. 설명을 할 수 있습니까?
jhpratt
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.