利用JavaScript对HTML和CSS实现简单的动态操作

假如我们现在想通过JS对原本的HTML或者CSS的内容或样式进行改变，比如说显示或隐藏内容、弹出各类对话框、改变内容的property、打开关闭窗口等等，我们应该怎么做呢？

首先我们先了解几个常用的JS代码：

alert警告对话框，alert（）
confirm确认对话框，confirm（）
prompt消息对话框，prompt（）
window.open打开新窗口，window.open(‘路径参数’，‘打开窗口的位置和名称’，‘自选参数’)
window.close关闭窗口，window.close（）
display隐藏或显示属性，Object.style.display=value
property改变样式属性，Object.style.property=new style

现在我们用上述代码中的一些代码来为网页添加动态效果。

假如我现在要编写一个代码，可以对网页中的内容进行颜色、字体、宽高进行改变，隐藏内容、显示内容、在新的窗口打开文中的网页，最后还可以取消我刚才所改变的设置的操作，我们应该怎样编写函数呢？

我们先有一个大致的思路：

定义一个可以改变字体颜色以及背景颜色的函数（利用property属性）
定义一个可以改变”盒子“宽高的函数（利用property属性）
定义隐藏内容的函数（利用display属性）
定义显示内容的函数（利用display属性）
定义一个打开文中网页的函数（利用window.open属性）
定义取消刚才所有设置的函数

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>CSDN Wellfancy</title>
<style type="text/css">
body{font-size:15px;}
#words{font-size:'宋体';height:400px;width:600px;border:#333 solid 1px;padding:5px;}
p{line-height:18px;text-indent:2em;}
</style>
</head>
<body><h2 id="title">利用JavaScript对HTML和CSS实现简单的动态操作</H2><div id="words"> <h5>首先我们先了解几个常用的JS代码：</h5><p>1. confirm确认对话框，confirm（）</p><p>2. display隐藏或显示属性，Object.style.display=value</p><p>3. property改变样式属性，Object.style.property=new styl</p><p>4. 有更多关于JS的问题请访问<a href="https://blog.csdn.net/weixin_53379398?spm=1000.2115.3001.5343">我的主页</a></p></div><form><!--设置好要用到的按钮，并且调用函数--><input type="button" onClick="changeColor()" value="改变颜色和字体" >  <input type="button" onClick="changeWH()" value="改变宽高" ><input type="button" onClick="hideText()" value="隐藏内容" ><input type="button" onClick="showText()" value="显示内容" ><input type="button" onClick="cancelSet()" value="取消设置" ><input type="button" onClick="openLink()" value="打开文中的链接" ></form><script type="text/javascript">
//定义"改变颜色和字体"的函数
function changeColor(){document.getElementById("title").style.color="blue";document.getElementById("words").style.backgroundColor="pink";
}//定义"改变宽高"的函数
function changeWH(){document.getElementById("title").style.width="50px";document.getElementById("words").style.height="200px";
}//定义"隐藏内容"的函数
function hideText(){document.getElementById("title").style.display="none";document.getElementById("words").style.display="none";
}
//定义"显示内容"的函数
function showText(){document.getElementById("title").style.display="block";document.getElementById("words").style.display="block";
}
//定义“打开链接”的函数
function openLink(){window.open('https://blog.csdn.net/weixin_53379398?spm=1000.2115.3001.5343','_blank','height=600px,width=800px,menubar=no,toolbar=no');
}//将新窗口的宽高分别设置为800和600px，并且没有菜单栏和工具栏//定义"取消设置"的函数
function cancelSet(){var myoption=confirm("是否要取消操作");if (myoption==true)document.getElementById("title").style="none";//如果取消设置点击确定后，会将所有设置过的样式清除，即nonedocument.getElementById("words").style="none";
}</script>
</body>
</html>

运行结果：

原始状态下

点击改变颜色和字体

点击改变宽高

点击隐藏内容

点击显示内容

点击取消设置

点击ok

这样就完成了，非常 简~单~易~懂~

利用JavaScript对HTML和CSS实现简单的动态操作相关推荐

用HTML+CSS跟简单的js操作完成响应式星巴克首页
前言一个简单的响应式页面,非常适合网页设计,html期末大作业. 如过觉得对你有帮助请关注小编,你的支持是我更新的动力,爱你! 一.成品展示二.代码部分 1.html+简单js <!DOCT ...
利用javascript实现简体与繁体的转换
这段代码只是利用Javascript实现了简繁体的相互转化,因为仅操作当前页面,无刷新所以速度快,转换过程流畅. 话不多说上正餐: var Default_isFT = 0 //默认是否繁体,0-简体 ...
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法 rem是css3新增的一个相对单位,相对的只是HTML根元素,可以只修改根元素字体大小就可以成比例地调整所有字体大小.我 ...
实验：利用JavaScript+CSS完成一个在线时钟效果（蜗牛学院）
原文链接:http://www.bossqiang.com/article/19 1. 实验简介本项目主要利用JavaScript结合CSS定位和Transform属性实现一个HTML在线时钟,运 ...
html 中箭头的代码,HTML中利用div+CSS实现简单的箭头图标的代码
/*箭头向上*/ .to_top { width: 0; height: 0; border-bottom: 10px solid #ccc; border-left: 10px solid tran ...
html直线箭头,HTML中利用div+CSS实现简单的箭头图标的代码
在网页设计中,我们经常得会用到一些箭头做为装饰来点缀我们的网页,虽然现在很多的网站的设计者们都喜欢以引用字体图标的形式来实现箭头的效果,但那样也会给网页的加载造成一些影响.今天飞鸟慕鱼小编就给大家说一 ...
css加简单的JavaScript做出毛玻璃效果
最主要的技术很简单,只要了解css的滤镜(filter),这里用的是里面的blur属性.效果图: 想要模糊效果基本上添加上filter这个属性就会有的,但它会连文字一起模糊,且让背景图片透过半透明的盒 ...
利用CSS写简单爱心
学习CSS三天了,可以利用目前所学的制作一个简单的爱心仅仅需要三个盒子一个正方形,两个圆如下图: 或许还不是能很清楚的看出来,我把多余的部分消除了,如下: 好了,有了结构,就可以来写代码了主体 ...
利用JavaScript在ASP.NET中动态生成系统菜单
用户在登陆一个系统后通常会因为权限的不同而使用不同的系统功能,我们在实现用户使用的菜单项时有两种选择,一是列出全部系统菜单项,根据用户的权限禁用一部分菜单,二是根据权限动态加载菜单,这样只要列出的 ...

利用JavaScript对HTML和CSS实现简单的动态操作

利用JavaScript对HTML和CSS实现简单的动态操作相关推荐

最新文章

热门文章