2016-11-29 3 views
2

Могу ли я использовать функцию css 'calc' при установке позиций в Javascript?Могу ли я использовать CSS 'calc' с Javascript

ePopup.style.top = "calc (100px - 1.5em);"

+11

Что делать, если вы попробуете его перед публикацией? – raven

+4

Я, конечно, пробовал это, похоже, не работал. Разве это не сработало, потому что я сделал что-то синтаксически неправильное или потому что он по сути не работает. – NickC

ответ

8

Да, calc() будет работать при настройке стилей в javascript.

Рабочий пример:

var innerDiv = document.getElementsByClassName('inner-div')[0]; 
 

 
function growInnerDiv() { 
 
innerDiv.style.width = 'calc(100% + 224px)'; 
 
} 
 

 
innerDiv.addEventListener('click', growInnerDiv, false);
.outer-div { 
 
display: inline-block; 
 
width: 200px; 
 
height: 100px; 
 
padding: 12px; 
 
border: 1px solid rgb(255,0,0); 
 
background-color: rgb(255,255,0); 
 
} 
 

 
.inner-div { 
 
width: 100px; 
 
height: 100px; 
 
color: rgb(255, 255, 255); 
 
font-weight: bold; 
 
text-align: center; 
 
line-height: 100px; 
 
font-family: arial, helvetica, sans-serif; 
 
background-color: rgb(255,0,0); 
 
cursor: pointer; 
 
transition: all 0.5s linear; 
 
}
<div class="outer-div"> 
 
<div class="inner-div">Click Me</div> 
 
<div>

+2

Хорошо знать, что calc может работать из Javascript, поэтому я буду упорствовать, пытаясь сделать эту работу на моей странице, вместо того, чтобы отказываться от альтернативных методов. Огромное спасибо за этот ответ, несмотря на вопрос о семизначных меток. – NickC

+2

Добро пожаловать, @NickC. Я считаю, что ваш вопрос совершенно справедлив - когда процесс не работает, жизненно важно изолировать компонент этого процесса, который не работает, а не делать предположения, - поэтому я поставил ваш вопрос под ключ. – Rounin

Смежные вопросы