.css는 calc()를 사용하는 것을 좋아하지 않습니까?

$(document).ready(function(){ 
    $("canvas").css({"border": "5px dotted white", "width": "600px", "height": "450px", "margin-left": "calc((window.innerWidth - 600px)/2)"}); 
});

주로 서식 문제입니다. 내가 잘못하고 있다는 것을 알고 있지만, 나는 무엇을해야 할지를 알 수 없었다. 즉, 이미 존재하는 캔버스에 대해 여백을 남기려하고 있는데, 문제는 "margin-left": "calc((window.innerWidth - 600px)/2)" 부분입니다. 이 부분이 없으면이 부분은 완벽하게 작동하지만이 코드가 잘못되었을 때 즉시 작동을 멈 춥니 다..css는 calc()를 사용하는 것을 좋아하지 않습니까?

margin-left는 창의 너비 (즉, 600 픽셀 부분)에서 캔버스의 너비를 뺀 다음 화면의 중앙에 고르게 맞춰 지도록 절반으로 나눈 값을 어떻게 지정합니까? . 수식이 잘못 포맷 되었습니까? 코딩을 잘못 했습니까? 아니면 .css 그냥 calc() 좋아하지 않아?

출처

2017-11-06 Darkangelsmg3

window.innerWidth 변수를 큰 따옴표 밖에 배치해야 javascript가 innerWidth를 평가할 수 있습니다. –

JS가 다른 말로 평가할 수 있도록 자바 스크립트의 window.innerWidth을 따옴표 밖에 배치해야합니다.

"margin-left": "calc((100vw - 600px)/2)"

이 그럼 당신은 창 크기 조정에 대한 재평가 필요가 없습니다 :

또는이 같은 CSS의 폭스 바겐 속성을 사용할 수 있습니다.

출처

2017-11-06 15:24:04 jabko87

감사합니다. 정확히 내가 찾고 있던 것이 었습니다! – Darkangelsmg3

기쁜 마음으로 도와 줬습니다. - 도움이된다면 대답으로 표시해주세요. – jabko87

CSS calc 속성은 JavaScript가 아닙니다. DOM에 액세스 할 수 없습니다. window.innerWidth과 함께 사용할 수 없습니다.

석회질 값은 다음 중 하나 일 수 있습니다

<calc-value> = <number> | <dimension> | <percentage> | (<calc-sum>)

도 MDN를 참조하십시오.

JS로 속성을 설정 중이므로 JavaScript를 사용하여 측면을 계산하고이를 기반으로 속성 값을 생성 할 수 있습니다. window.innerWidth이 변경되면 업데이트 할 수 있도록 resize 이벤트를 바인딩하려고합니다.

출처

2017-11-06 15:21:33 Quentin

.css는 calc()를 사용하는 것을 좋아하지 않습니까?

답변

관련 문제