我正在创建一个程序,允许用户更改div的大多数CSS属性。我需要它居中,我通常这样做的方式是使用下面的CSS代码。
div {
position: fixed;
background: black;
width: 100px;
height: 100px;
top: calc(50% - 50px);
right: calc(50% - 50px);
}
我需要将宽度和高度作为自己的变量,然后对顶部和右侧属性进行计算,将它们除以2并从50%开始。
var width = 100;
var height = 100;
var top = (height / 2);
var right = (width / 2);
$('div')
.css('position','fixed')
.css('background','black')
.css('width',width + 'px')
.css('height',height + 'px')
.css('top','calc(50% - ' + top + 'px)')
.css('right','calc(50% - ' + right + 'px)');
如何在使用变量作为CSS属性的值时实现居中的div?
答案 0 :(得分:2)
如果您不需要支持糟糕的IE CSS变量,那么这是一个选项。
<强> CSS 强>
:root
(即html
)。:root --half: 50px
CSSVar必须以2个破折号为前缀。在代码段中,我在--half
上声明了:root
,其值为50px
。top: calc(50% - var(--half));
right: calc(50% - var(--half));
<强>的JavaScript 强>
<强>段强>
// Reference the input
var A = document.getElementById('input1');
// On input event on input#A call setHalf() function
A.addEventListener('input', setHalf, false);
/* setHalf() accesses the CSS by the CSSDeclaration
|| interface.
*/
function setHalf(e) {
// Reference the div
var X = document.getElementById('shape1');
/* Get div#shape1 computedStyle in order to
|| access it's ruleset declarations.
*/
var Y = window.getComputedStyle(X);
// Get the value of the CSSVar --half
var Z = Y.getPropertyValue('--half');
// Set --half value to the value of input#A
X.style.setProperty('--half', this.value + 'px');
}
&#13;
:root {
--half: 50px;
}
#shape1 {
position: fixed;
background: black;
width: 100px;
height: 100px;
top: calc(50% - var(--half));
right: calc(50% - var(--half));
border: 1px solid black;
}
&#13;
<div id='shape1'></div>
<input id='input1' type='number' min='-150' max='150' value='50'>
&#13;
答案 1 :(得分:0)
事实证明,我无法使用“top”或“right”这两个词作为变量名。
以下是最终正在运行的代码。
var width = 100;
var height = 100;
var test1 = width / 2;
var test2 = height / 2;
$('div')
.css('position','fixed')
.css('background','black')
.css('width',width + 'px')
.css('height',height + 'px')
.css({'top':'calc(50% - ' + test1 + 'px)'})
.css({'right':'calc(50% - ' + test2 + 'px)'});