本文共 1051 字，大约阅读时间需要 3 分钟。

假如我们现在想通过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

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

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

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

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

     
利用JavaScript对HTML和CSS实现简单的动态操作
  
   
      
    
首先我们先了解几个常用的JS代码：
        
    
1. confirm确认对话框，confirm（）
        
    
2. display隐藏或显示属性，Object.style.display=value
        
    
3. property改变样式属性，Object.style.property=new styl
		
    
4. 有更多关于JS的问题请访问我的主页
  
   
  
   
  
        
          
        
        
    	
    	
         
   
  

运行结果：

原始状态下

点击改变颜色和字体

点击改变宽高

点击隐藏内容

点击显示内容

 点击取消设置

 点击ok

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

转载地址：https://blog.csdn.net/weixin_53379398/article/details/119194342 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！