HTMLDOMinnerHTMLプロパティ
HTML DOMのinnerHTMLプロパティが返され、要素の内部HTMLを変更できるようになります。内側のHTMLはコンテンツです。
構文
以下は構文です-
1.innerHTMLを返す
object.innerHTML
2.内部HTMLの設定
object.innerHTML=”value”
ここでは、「値 」は、コンテンツまたはネストされたHTML要素を表します。
例
innerHTMLプロパティの例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.outer-box{
background-color:#347924;
width:200px;
height:200px;
padding:10px;
text-align:center;
font-weight:bold;
color:white;
margin:1rem auto;
}
.inner-box{
width:100px;
height:100px;
margin:3rem auto;
background-color:#8dce79;
}
.inner-circle{
width:100px;
height:100px;
border-radius:50%;
background-color:#8dce79;
margin:3rem auto;
}
</style>
</head>
<body>
<h1>innerHTML property Example</h1>
<div class="outer-box">
</div>
<button onclick="getsquare()">Get Square</button>
<button onclick="getcircle()">Get Circle</button>
<script>
function getsquare() {
var outerBox = document.querySelector('.outer-box');
outerBox.innerHTML ='<div class="inner-box">square</div>';
}
function getcircle() {
var outerBox = document.querySelector('.outer-box');
outerBox.innerHTML ='<div class="inner-circle">circle</div>';
}
</script>
</body>
</html> 出力
これにより、次の出力が生成されます-
「GetSquare」をクリックします 」ボタンをクリックすると、緑色の正方形の内側に正方形が表示されます。
次に、[サークルを取得]をクリックします 」ボタンをクリックすると、緑色の四角の中に円が表示されます。
-
HTMLDOMoffsetParentプロパティ
HTML DOM offsetParentプロパティは、子オフセットが定義されている参照された親要素を返します。 以下は構文です- 参照されたオフセット親要素を返す HTMLelement.offsetParent HTML DOM offsetParentの例を見てみましょう。 プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM offsetParent</title> <style type="text/css"> &n
-
HTMLDOMタイトルプロパティ
HTML DOM titleプロパティは、HTML要素のtitle属性の値に対応する文字列を返す/設定します。 HTML要素にカーソルを合わせると、タイトルの値が表示されます。 以下は構文です- 文字列値を返す ElementOfHTMLObject.title タイトルを設定する 文字列値に ElementOfHTMLObject.title = string 例 HTMLDOMタイトルの例を見てみましょう プロパティ- <!DOCTYPE html> <html> <head> <title>HTML DOM title</ti