JSを使用して、CSSファイルで宣言されたプロパティを変更します。

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');