자바 스크립트 변수를 CSS에 전달

나는 모범 사례가 지시하는 경향에 따라 코드를 분리하고 싶습니다. 따라서, 나는 자바 스크립트 코드의 다음 문제 라인을 가지고 :자바 스크립트 변수를 CSS에 전달

는

x[i].firstChild.innerHTML = remain;

이 완벽하게 작동하지만, 자바 스크립트의 편집 프리젠 테이션의 내 규칙을 나누기. 대신 @remain을 CSS에 전달하고 내가 참조하고있는 x[i] 요소에 클래스를 추가하고 싶습니다. 수업에서 내용이 변경되지만 CSS에서 JS 변수를 참조하는 방법을 모르겠습니다.

간단히 말해, JS에서 변수 x를 만들면 CSS에서이 값을 어떻게 참조 할 수 있습니까?

모든 언어가 다른 파일에있는 것이 중요합니다.

출처

2016-09-20 Corey Ray Nalli

대신 @remain은 매우 특정한 요소 내에 배치 된 계산 된 값으로 사용할 수 있습니다. KnockoutJS는 HTML과 JavaScript 간의 연결을 훨씬 쉽게하지만 여전히 두 가지 사이에 좋은 장벽을 유지합니다. JavaScript와 HTML 사이의 장벽은 ReactJS와 JSX의 채택으로 인해 매우 빨리 무너져 내고 있습니다. 그래서 왜 당신이 왜 분리되어 있는지에 대한 개념에 대해 생각해보아야합니다. – k2snowman69

나는 일이 바뀔 수 있다는 것을 이해하지만 현재 접근성은 내 플랫폼의 큰 부분입니다. 그 말은 지금 당장은 기본 웹 디자인 연습을 가진 모든 사람들이 제 코드를 매우 쉽게 (특히 고용주들에게) 따라갈 수 있다는 것을 의미합니다. 이것은 제게 많은 도움이됩니다. 누구든지 내 코드를 읽을 필요가 없으면 더 많은 틈새 관행을 사용할 수 있습니다. 그러나 귀하의 의견은 나에게 방향에 관해서 생각할 무언가를 제공합니다. –

당신의 규칙은 JS에서 HTML 컨텐트를 설정하고 싶지 않지만 CSS에서 JS 변수를 참조하기를 원하는 임의적 인 것으로 보입니다. CSS가 방금 콘텐츠의 스타일을 지정하고 콘텐츠의 텍스트를 설정하지 않기 때문에 * 더 나쁜 것으로 보이는 항목이있는 경우 또한 HTML 요소의 텍스트를 JS에서 업데이트하는 것은 일반적인 관행이므로 피하려고하는 코드를 문제가되지 않는다고 설명하지는 않습니다. CSS에서 요소의 텍스트를 어떻게 설정합니까? – nnnnnn

당신이 당신이 시도 할 수 JS를 사용하려는 경우이

@percent: 1; 
    @height: `Math.round(screen.height * @{percent})`; 
    @width: `Math.round(screen.width * @{percent})`; 
    div.content { 
    margin: auto; 
    top: @height; 
    width: @width; 
    }

을 시도 JS 덜 CSS를 사용하려면 : 당신이 jQuery를 사용하는 완 경우

var percent=1; 
document.querySelector('div.content').style.top = Math.round(screen.height * percent)+'px'; 
document.querySelector('div.content').style.width = Math.round(screen.width * percent)+'px';

당신이 시도 할 수 있습니다 이

var percent=1; 
$("div.content").css('top', Math.round(screen.height * percent)+'px'); 
$("div.content").width(Math.round(screen.width * percent));

출처

2016-09-20 04:58:02

자바 스크립트 변수를 CSS에 전달

답변

관련 문제