javascript - 常用互动 innerhtml className display class-CSDN博客

本文介绍了前端开发中常用的交互方法，如使用document.write(), alert(), confirm(), prompt(), window.open()等进行用户交互，并展示了如何利用JavaScript操作DOM元素的样式属性，实现元素颜色、大小、背景色的修改及元素的显示与隐藏。


常用互动方法：

document.write() 输出
alert(); 警告
confirm(); 确认
prompt(); 提问
window.open(); 打开新窗口
window.close();关闭新窗口
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

改变HTML样式：
语法:
Object.style.property=new style;

注意:Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。

基本属性表（property）:

这里写图片描述

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

显示和隐藏（display属性）
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：
Object.style.display = value
 mychar.style.display="none";

控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
object.className = classname
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观