의사 동적 CSS를 어떻게 구현할 수 있습니까?

-3

페이지에서 맞춤 색상 요소를 관리하는 데 문제가 있습니다.의사 동적 CSS를 어떻게 구현할 수 있습니까?

예를 들어, 페이지에 100 개의 탐색 사각형이 있습니다. 각 사각형에는 고유 한 색이 있으며, 각 유형의 색상에 대한 CSS 클래스를 만드는 것을 제외하고는 어떤 방식 으로든 생각할 수 없습니다. CSS 코드가 많이 생성됩니다.

이 몇 가지 도움이 필요하십니까, 감사

*이 문제를 해결하는 가능한 방법 중 하나로 추가 자바 스크립트 & JQuery와 태그

업데이트 : 응답들에 대한 감사합니다, 내가 필요 같은 느낌 세부 사항에 들어가기. 내 검색 페이지에서 카테고리 네비게이션을 제곱 한 결과, 색상은 서버 측에서 이동하거나 클라이언트의 js에 저장할 수 있습니다. 인스턴트 메신저 서버에서 카테고리의 목록을 얻는 것입니다 (각각 너무 하나의 색상을 얻는다고 가정합니다) 그럼 모든 사각형을 만들었습니다. (그들은 기본적으로 흰색이지만 켜기 : 색상을 변경하려면 마우스를 올려 놓습니다.) 그래서 나는 그런 해결책을 찾으러 갈 것입니다. CSS와

<ul id="squares"> 
<li class="greencolor"></li> 
<li class="redcolor"></li> 
<li class="bluecolor"></li> 
</ul>

이

#squares li.redcolor:hover{ 
background:red; 
} 
#squares li.greencolor:hover{ 
background:green; 
} 
#squares li.bluecolor:hover{ 
background:blue; 
}

희망 지금 당신은 내가 100 개 요소에 대한 CSS 코드의 톤을 언급에 대해 말하고 있었는지 볼 수 있습니다. CSS를 통해 그것을 만들 수있는 방법이 아닌 인라인 CSS 변경을 찾기 위해 노력

var colorsMap={'redcolor':'red','greencolor':'green'};  
$('#squares li').on('hover',function(e){ 

    $(this).css('background-color', colorsMap[$(this).attr('class')]; 

});

하지만 나에게 우아한 솔루션으로이 나던 소리와 임 :

그리고 네, 제가 그런 솔루션을 갈 수 있음을 이해 by js

출처

2013-01-31 Leg0

그리고 많은 CSS 코드와 비교할 때 css가 정상적인 사용자가 기능을 끄지 않고 모든 최신 브라우저에서 작동한다는 것 이외의 많은 js 코드와 비교하면 무엇이 문제입니까? –

자바 스크립트는 CSS에 대한 바로 가기가 아닙니다. 그것은 당신에게 동적으로 무언가를 할 수있는 능력을 제공합니다. 자바 스크립트에서 더 짧게 만들 수있는 유일한 방법은 다음 사각형의 색상이 실제 색상에서 수학적으로 달성 가능하다는 것입니다. 그런 다음 루프를 수행 할 수 있으며 스타일을 추가하는 단 하나의 상대 경로 (알고리즘에 따라 다름)가 있습니다. –

각 사각형의 색상이 고유해야합니까? –

나는 그것을 달성하기 위해 CSS를 사용하는 것이 좋습니다,하지만 여전히 인라인 스타일보다 나은 솔루션이 비록 : <head>에

동적 삽입 CSS에 의해

var selector = '#squares li' 
    , css = [] 
    , style = document.createElement('style') 
    , colorsMap= { 
     'redcolor': 'red', 
     'greencolor': 'green', 
     'bluecolor': 'blue' 
    } 
$(selector).each(function() { 
    css.push(selector + 
      '.' + 
      // recommand to use data-attr to store color info 
      // assuming `className == 'bluecolor'` 
      this.className + 
      ':hover' + 
      '{' + 
      'background:' + 
      colorsMap[ this.className ] + 
      '}' 
      ) 
}) 
style.textContent = css.join('') 
document.head.appendChild(style)

, 당신은 여전히 정상적인 CSS에서 demo을 혜택을받을.

그리고 동적 인 CSS 파일을 백엔드 측에서 생성 할 수도 있습니다. 구성 양식 등으로 색상을 관리하는 것이 더 쉽습니다.

출처

2013-01-31 15:04:44 Chris

완벽한 하나! 정확히 내가 무엇을 찾고 있었는지;) thanks mate – Leg0

처음에는 제 영어가 가난합니다. 그러나 나는 배울 최선을 다하고 있습니다. 그래서 나는 당신을 분명히 이해한다고 말할 수는 없지만 당신이 말하는 것은 선택자를 생각하게합니다. 네가 원한다면 나는 알지 못하지만 나쁜 생각은 아니라고 생각한다. 다음과 같이 말하십시오 :
$(":header").css("color","#FF00FF"); $("div:contains('test')").css("background","#666600"); $("div:empty").css("background","#888800"); $("div:has(span)").css("background","#008080"); 등
그들의 역할은 제가 말하지 않을 것입니다. 나는 배우는 것이 쉽지 않다고 생각합니다. 그들은 매우 유용합니다.

출처

2013-01-31 14:24:30

의사 동적 CSS를 어떻게 구현할 수 있습니까?

답변

관련 문제