2017-07-25 13 views
0

'onclick'関数を作成したいと思います。 それは私がYoutubeの助けを借りてできることでした。 ここで、灰色のフィールドをクリックすると、別のコンテナが右に50%幅で移動するという機能を追加したいと思います。私はテキストと写真でこのdivを記入したいと思います。 私の悪い英語のため申し訳ありませんが、私はあなたたちは私が'onclick'関数の作成方法は?

.news { 
 
position: fixed; 
 
display: block; 
 
width: 33.33%; 
 
height: 100%; 
 
float: left; 
 
background-color: grey;; 
 
background-size: auto, cover; 
 
transition: width 0.5s; 
 
} 
 

 
.open{ 
 
width: 50%; 
 
transition: width 0.5s; 
 
position: fixed; 
 
display: block; 
 
width: 50%; 
 
height: 100%; 
 
float: left; 
 
background-color: grey; 
 
background-size: auto, cover; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="css/reset.css"> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    
 
<script> 
 
    function toggleClass (el) { 
 
     
 
     if(el.className == "news"){ 
 
\t \t el.className = "open"; 
 
\t } else { 
 
\t \t el.className = "news"; 
 
\t } 
 
     
 
    } 
 
</script> 
 
    
 
</head> 
 

 
<body> 
 
    <div class="news" onclick="toggleClass(this)"></div> 
 
</body> 
 
</html>

+7

ニースタイトルマンを追加することができますinnerHTMLプロパティを使用することができます理解してほしいです。 –

+0

ハードワークで、良い本を鼻で。 – Teemu

答えて

0

何をしたいあなたはあなたのテキスト

el.innerHTML = 'text' 
関連する問題