CSS 클래스에 값을 입력하십시오.

Question

이 질문을하기 전에 미리 사과드립니다. 내가 할 수있는 최선의 방법으로 검색을 시도했지만 실제로 설명하는 방법을 모르겠습니다.

데이터 테이블에 주석을 추가하고 있습니다. 나는 코멘트 거품의 배경을 사용자에 따라 다른 색상으로하고 싶습니다. 주석 버블은 배경이 포함 된 CSS 클래스를 사용합니다. 내가 다음 코드에서 주석 거품을 만들 면도기를 사용

.triangle-border { 
    position:relative; 
    padding:5px; 
    margin:1em 0 3em; 
    border:1px solid #CECECF; 
    color:#333; 
    background:#f8f4d4; /* <<== background here */ 
    /* css3 */ 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    border-radius:10px; 
} 

.triangle-border:before { 
    content:""; 
    position:absolute; 
    bottom:-20px; /* value = - border-top-width - border-bottom-width */ 
    left:40px; /* controls horizontal position */ 
    border-width:20px 20px 0; 
    border-style:solid; 
    border-color:#5a8f00 transparent; 
    /* reduce the damage in FF3.0 */ 
    display:block; 
    width:0; 
} 

/* creates the smaller triangle */ 
.triangle-border:after { 
    content:""; 
    position:absolute; 
    bottom:-13px; /* value = - border-top-width - border-bottom-width */ 
    left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */ 
    border-width:13px 13px 0; 
    border-style:solid; 
    border-color:#fff transparent; 
    /* reduce the damage in FF3.0 */ 
    display:block; 
    width:0; 
} 

/* creates the larger triangle */ 
.triangle-border.left:before { 
    top: 5px; /* controls vertical position */ 
    bottom:auto; 
    left:-20px; /* value = - border-left-width - border-right-width */ 
    border-width: 0px 20px 10px 0; 
    border-color:transparent #CECECF; 
} 

/* creates the smaller triangle */ 
.triangle-border.left:after { 
    top:6px; /* value = (:before top) + (:before border-top) - (:after border-top) */ 
    bottom:auto; 
    left:-15px; /* value = - border-left-width - border-right-width */ 
    border-width:0px 16px 7px 0; 
    border-color:transparent #f8f4d4; /* <<== and here */ 
} 

아래 참조 :

<div style="height: 30px;"> 
    @comment.User 
    <span class="triangle-border left" style="width: @comment.CommentLength">@comment.Text</span> 
    <span style="font-size: 12px">@comment.CreateDate</span> 
</div> 

내가 사용자를 테이블에 몇 다스 정도의 다른 배경 색상을 저장하는 일을하고 할당 계획했다 로그인 할 때 사용하지 않은 색상으로 변경합니다. 그 사용자에 대한 설명은 할당 된 색상으로 나타납니다. 처음에는 다른 색상으로 수업을 만들어야한다고 생각했습니다. 어쨌든 이것을해야 할 수도 있습니다. 그러나 나는 이것을 할 수있는보다 역동적 인 방법이 있기를 희망했다. 어떻게 든 다른 사람들의 의견을 변경하지 않고 CSS에 색상을 삽입 할 수 있다면 좋을 것입니다.

또 다른 덜 바람직한 방법은 모든 스타일을 인라인으로 만드는 것이고 배경색을 삽입하려면 면도기를 사용할 수 있다고 생각합니다. 이 문제는 페이지에 몇 백 개의 주석이있을 수 있으며 페이지가 상당히 커지고 렌더링 속도가 느려질 수 있다는 것입니다.

모든 아이디어를 얻을 수 있습니다. 내 문제에 대한 설명이나 코드가 필요하면 언제든지 물어보십시오.

Answer 1

일부 작업은 클라이언트 측 코드에 적합합니다. 이것은 요소 집합이 아닌 요소별로 다양한 값을 원할 때 나타나는 것입니다 (CSS의 클래스 스타일링에 더 적합 함).

jQuery 확장으로 다시 작성한 다음 코드는 지정된 요소의 텍스트 해시 값을 기반으로 배경으로 사용될 색상을 생성합니다. 필요한 요소에 .hashColor()을 사용하기 만하면됩니다.

JSFiddle :http://jsfiddle.net/040yL80p/1/

$.fn.hashColor = function (options) 
    { 
     // Merge options into an empty object 
     options = $.extend({}, options); 
     this.each(function() 
     { 
      var $this = $(this); 

      // Get the source of the text to hash 
      var str = options.textSelector ? $this.find(options.textSelector).text() : $this.text(); 

      // Find the target for the background color and class 
      var $target = options.bgSelector ? $this.find(options.bgSelector) : $this; 

      var hash = 0; 
      for (var i = 0; i < str.length; i++) 
      { 
       hash = str.charCodeAt(i) + ((hash << 5) - hash); 
      } 
      var colour = '#'; 
      var rgb = []; 
      for (var i = 0; i < 3; i++) 
      { 
       var value = (hash >> (i * 8)) & 0xFF; 
       rgb[i] = value; 
       colour += ('00' + value.toString(16)).substr(-2); 
      } 

      var lum = Math.sqrt(rgb[0] * rgb[0] * .299 + rgb[1] * rgb[1] * .587 + rgb[2] * rgb[2] * .114); 

      $target.css('background-color', colour); 
      $target.toggleClass('Light', lum < 100); 
     }); 
     return this; 
    } 

테스트 코드

$('.comment .username').hashColor(); 

참고 : 그것은 자동으로 승 클래스 .Light을 추가

• 암탉은 어두운 텍스트의 경우 너무 어둡게 보입니다. 대조 텍스트를 허용합니다.
• textSelector 옵션을 사용하면 색 대신 부모 요소를 대상으로 지정할 수 있지만 상대 선택기를 사용하여 하위 항목에서 텍스트를 가져올 수 있습니다.
• bgSelector 옵션을 사용하면 일치하는 요소 내에서 색상 변경에 대한 하위 항목을 타겟팅 할 수 있습니다.

자식 요소를 기반으로 전체 코멘트를, 착색에

$('.comment').hashColor({textSelector: '.username'}); 

결과 : http://jsfiddle.net/TrueBlueAussie/040yL80p/2/