【JavaScript自学笔记-入门篇】第4章 编程挑战
【摘要】 请编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数，点击相应按钮执行相应操作，点击"取消设置"按钮后，提示是否取消设置，如是执行操作，否则不做操作
学习教程来源：慕课网-JavaScript入门篇 by：慕课官方号
小伙伴们，请编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数，点击相应按钮执行相应操作，点击"取消设置"按钮后，提示是否取消设置，如是执行操作，否则不做操作。
我的写法：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="" />
<title>编程练习</title>
<style>
.cc{
color=green;
weight=10px;
height=10px;
}
.one{
color=red;
}
.two{
weight=30px;
height=30px;
}
</style>
<script>
var mye=document.getElementById("ii");
var myclass=mye.className();
function changeColor(){ //改变颜色函数
mye.style.color="red";
}
function changeWeightAndHeight(){
mye.className="two";
}
function changeDisplayNone(){
mye.style.display="none";
}
function changeDisplayBlock(){
mye.style.display="block";
}
function changeInitialization(){
mye.className="cc";
}
</script>
</head>
<body>
<p id="ii" class="cc">段落标签元素文本</p> <!--我是一个段落标签-->
<form>
<input type="bottom" value="点击改变颜色" onclick="changeColor()" />
<input type="bottom" value="点击改变宽高" onclick="changeWeightAndHeight()" />
<input type="bottom" value="点击隐藏内容" onclick="changeDisplayNone()" />
<input type="bottom" value="点击显示内容" onclick="changeDisplayBlock()" />
<input type="bottom" value="点击取消设置" onclick="changeInitialization()" />
</form>
</body>
</html>
参考答案
-
2.06KB 下载次数：0次
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
琪哥能酷2022/12/29 08:02:201楼编辑删除举报
这里移除的style是节点里面声明的style,而不能移除className所带来的css样式