Question

说我有css声明

.example {
  height: 60px;
}

有没有办法使用Javascript修改60px？

比如说，

function updateHeight() {
  // add 10px to the css class `example`;
}

所以css类将有效地成为

.example {
  height: 70px;
}

Answer 1

您可以使用以下代码：

document.querySelector('.test').style.height = '150px';

.test {
  width : 100px;
  height : 100px;
  background : #0AF;
}

<div class="test"></div>

当然，您总是有机会根据需要使代码变得抽象。

在示例中，您可以拥有一个可以像这样工作的函数：

// Responsible to set the CSS Height property of the given element
function changeHeight( selector, height ) {
    // Choose the element should get modified
    var $element = document.querySelector( selector );
    // Change the height proprety
    $element.style.height = height;
}

changeHeight( '.test', '150px' );

或者你可以更加抽象：

// Responsible to modify the given CSS property of the given
// HTML element
function changeCssProperty( selector, property, value ) {
    // Find the given element in the DOM
    var $element = document.querySelector( selector );
    // Set the value to the given property
    $element.style[property] = value;
}

changeCssProperty( '.test', 'width', '200px' );

使用JS修改CSS文件中声明的属性。

1 个答案: