问题描述：

【注】在前端中最让人头疼郁闷的就是兼容性问题（主要是IE浏览器）
例如下面的栗子：

<style>#click {width: 200px;height: 100px;background-color: #ccc;display: none;}
</style><body>
<input type="checkbox"onmouseover="click.style.display = 'block'"onmouseout="click.style.display = 'none'">
<div id="click" >提示信息</div>
</body>

原因分析：

以上代码在IE中运行正常，并能得到预期效果，但在FireFox和低版本的chrome中会出现“click is not defined”，简单来说是click没有定义

为什么说click没有定义呢？
上面栗子中我们直接拿着id：click直接用了，实际是不兼容的写法

解决方案：

兼容写法是使用document.getElementById('id名')

<input type="checkbox"onmouseover="document.getElementById('click').style.display = 'block'"onmouseout="document.getElementById('click').style.display = 'none'">

总结

编写JS的流程
1、首先有个--布局：HTML+CSS （稳固的，没有任何兼容问题，必须特别靠谱）
2、--属性：确定要修改哪些属性
3、--事件：确定用户做哪些操作（产品设计）
4、--编写JS：在事件中，用JS来修改页面元素的样式

鼠标提示框（第一个JS特效）相关推荐

html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)
div对话框,js+div+css实现好看的提示框效果(转) (2012-02-18 20:46:23) 标签: html div css 杂谈提示窗都越来越人性化了,呵呵,有的时候老板就和你要那么 ...
[转]JavaScript消息提示框类库 - Humane JS
转自给力技术 Humane JS 是一个实现消息提示框功能的轻量级 JavaScript 类库,并且不依赖于其它框架.提示框的显示特效利用了 CSS3 的变换特性,相当给力.它预先定义好了如下几种提示 ...
svg+js鼠标悬停卡片充满动画js特效
下载地址svg+js的鼠标悬停动画特效,css不规则的图形鼠标悬停后卡片充满动画特效. dd:
html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
鼠标悬停文字断裂字体js特效
下载地址一款鼠标悬停文字断裂字体特效,该特效实现了鼠标悬停文字断裂的动画特效,能够让您的网页生动起来. dd:
CSS3鼠标悬停图片遮罩动画js特效
下载地址纯CSS3图片鼠标悬停动画特效 dd:
【JS】用户可选择确定或取消的提示框
confirm()用于弹出一个带有确认和取消按钮的提示框需要一个字符串作为参数,该字符串将会作为提示文字显示出来确定 = true 取消 = false if (confirm("确认删 ...
echarts 饼图每块颜色_读者提问，如何让 tooltip 提示框内显示饼图
效果截图前些天有读者问,ECharts 的提示框(tooltip)内,能不能添加一个饼图? 我之前倒是看到过用饼图作为散点图数据点的例子,感觉应该有办法--但是提示框和那个不太一样,估计需要研究一下 ...
html input tooltip,BootStrap tooltip提示框使用小结
提示框提示框的基本使用方式为: test message data-original-title可以直接写为title,仍然能正常使用,源码中优先查找前者,前者不存在就会查找title 提示框不提供 ...

鼠标提示框（第一个JS特效）

问题描述：

原因分析：

解决方案：

总结

鼠标提示框（第一个JS特效）相关推荐

最新文章

热门文章