給文科生的十四堂javascript課：改變style的參數

有一個div。你按下去就會更動style。

按下去改變style。直寫的方法。

語法：

<div style="border: 1px solid red;" onclick="this.style='color: red; background-color: lightgray; padding: 1em;'">

按下去改變style。直寫的方法。
</div>

再來是，你一定要會的function()的寫法，可以改變很多屬性參數。

你可以看到有兩個div。

我們使用this這一個寫法，比較直觀。

你按下去，div就會產生不同的變化。

第一個div。

第二個div。

語法：

<style>
.cla0504 {
background-color: gray;
margin-bottom: 1em;
}
</style>


<div class="cla0504" onclick="changetodiv(this, 'color:red; padding: 1em; border: 1px solid red; width: 20%;')">
第一個div。
</div>


<div class="cla0504" onclick="changetodiv(this, 'color:blue; padding: 2em; border: 1px solid green; width: 30%;')">
第二個div。
</div>

<script>
function changetodiv(elementdiv, chtostyle) {

elementdiv.style = chtostyle;

}
</script>

語法的原型：

<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>

<script>
function myFunction(element, color) {
  element.style.color = color;
}
</script>