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

Question 1

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');

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

Question 2

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

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

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

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

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

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

Question 3

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

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

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

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

Question 4

나는 보통 사용

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

도움이되는 희망

Question 5

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

Question 6

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

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

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

그래도 흥미로운 발견.

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

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

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

Question 7

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

Question 8

맞다?

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

Question 9

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

Question 10

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

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

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

또는

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

Question 11

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

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

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

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

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

Question 12

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

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