Question

我想创建一个'onclick'功能。这就是我在Youtube的帮助下所能做到的。现在我想添加一个函数，当我点击灰色字段时，另一个容器向右移动，宽度为50％。我想用文字和图片填充这个div。抱歉我的英文不好，我希望你们明白我的意思

.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"){
		el.className = "open";
	} else {
		el.className = "news";
	}
        
    }
</script>
    
</head>

<body>
    <div class="news" onclick="toggleClass(this)"></div>
</body>
</html>

Answer 1

您可以使用innerHTML属性添加文本

el.innerHTML = 'text'

如何创建'onclick'功能？

1 个答案: