Programing

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

lottogame 2020. 10. 9. 08:46
반응형

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


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

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


문서에서 알 수 있듯이 올바른 아이디어가 있습니다.

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

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

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

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

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


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

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

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

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


나는 보통 사용

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

도움이되는 희망


"text-align"대신 "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'});

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

how to set center of the textboxes


suppose below is the html paragraph tag:

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

and we want to change the paragraph color in jquery.

The client side code will be:

<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

반응형