JavaScriptからCSSを操作する
- JavaScriptからCSSを操作する
解説
| キーワード | 用途 |
|---|---|
- コンテンツのつくりかた
-
HTML
<div class="button_list">
<button onclick="pickR()">赤を選ぶ</button>
<button onclick="pickG()">緑を選ぶ</button>
<button onclick="pickB()">青を選ぶ</button>
<button onclick="stroke()">書く</button>
<p id="pencil" style="background-color:red; width: 5cm"></p>
<!--/.button_list--></div>
CSS
#pencil{
display:block;
color:#fff;
min-width:200px;
}
JS
// 色違いの鉛筆
function Pen(color, length){
this.color = color;
this.length = length;
this.draw = function(){
this.length -= 0.1
};/*this.draw*/
}/*function Pen*/
let penR = new Pen("red", 5);
let penG = new Pen("green", 15);
let penB = new Pen("blue", 7);
let pen = penR;
function pencil_stroke(){
pen.draw();
document.getElementById("pencil_color").textContent = pen.color;
document.getElementById("pencil_color_length").textContent = pen.length;
}
function pickR(){
pen = penR;
}
function pickG(){
pen = penG;
}
function pickB(){
pen = penB;
}
色違いの鉛筆
HTML
//鉛筆の長さと色の表示を切り替える
<button onclick="pickR()">赤を選ぶ</button>
<button onclick="pickG()">緑を選ぶ</button>
<button onclick="pickB()">青を選ぶ</button>
<button onclick="pencil_stroke()">書く</button>
<p>
鉛筆の色<span id="pencil_color"></span>、
長さは<span id="pencil_color_length"></span> cm
</p>
JS
// 色違いの鉛筆
function Pen(color, length){
this.color = color;
this.length = length;
this.draw = function(){
this.length -= 0.1
};/*this.draw*/
}/*function Pen*/
let penR = new Pen("red", 5);
let penG = new Pen("green", 15);
let penB = new Pen("blue", 7);
let pen = penR;
function pencil_stroke(){
pen.draw();
document.getElementById("pencil_color").textContent = pen.color;
document.getElementById("pencil_color_length").textContent = pen.length;
}
function pickR(){
pen = penR;
}
function pickG(){
pen = penG;
}
function pickB(){
pen = penB;
}
プロフィール
| 名前 | ぬえさぶろう |
|---|---|
| 仕事 | PCの部品管理・取扱説明書作成 |
| 好物 | 納豆・カレー |
| 技能 |
|
