php鼠标已入移除,原生javascript学习：鼠标移入移出改变样式

这是一个简单的例子，先看demo：

源码如下：

#box {width:140px; height:140px; margin: auto; background-color:black;

color: white; font: 12px/1.5 Tahoma; padding: 20px}

window.onload = function() {

var oBox = document.getElementById("box");

oBox.onmouseover = function() {

oBox.style.cssText = "background-color: red; color: green";

};

oBox.onmouseout = function() {

oBox.style.cssText = "";

}

鼠标移入改变样式，鼠标移出恢复。

通过修改 oBox.style.cssText 来修改样子。

(注：这里的cssText相当于动态刷新内嵌在html文本上，具有最高优先级，当把 cssText 清空，不会影响标签或外置 css 文件所设置的样式)

但在 javascript 里使用 cssText 其实是违背样式和行为分离原则的。

更好的办法是用一个 hook ，即利用 javascript 为元素添加 class，而class的样子在 css 文件里设定好。

改进的源码如下：

#box {width:140px; height:140px; margin: auto; background-color:black;

color: white; font: 12px/1.5 Tahoma; padding: 20px}

#box.hover {background-color: red; color: green}

window.onload = function() {

var oBox = document.getElementById("box");

oBox.onmouseover = function() {

oBox.className = "hover";

};

oBox.onmouseout = function() {

oBox.className = "";

};

鼠标移入改变样式，鼠标移出恢复。

作为一个好的web开发者，

一定要把结构、样式、行为分离谨记于心。

php鼠标已入移除,原生javascript学习：鼠标移入移出改变样式相关推荐

php鼠标已入移除,angularjs鼠标移入移出实现显示隐藏
操作主要是ng-mouseenter和ng-mouseleave配合使用,同时注意$parent实现动态拼接变量截图如下: CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部 ...
javascript 鼠标移入移出改变图片透明度
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>鼠标移 ...
鼠标移入移出改变元素的背景颜色
鼠标移入移出改变元素的背景颜色首先:给div标签设置一个基本的样式, 让这个div元素垂直居中. 效果展示: 然后在script标签里面获取元素div, 将获取到的div赋值给div,然后输出到控 ...
原生js、jq移入移出事件
在原生js上移入移出共有两种一种是冒泡的鼠标移入或移出被选元素及其所有子元素就会触发 element.onmouseover = function(){alert("移入"); ...
html鼠标滑过导航栏变色,JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: JAVASCRIPT之导航栏鼠标点击变色特效 body { font-size:12px; font-family: Ar ...
java鼠标滑入换图片_超简单---鼠标滑过变换图片
鼠标滑过,图片变换,非常实用,用JS可以很容易做到,但是JS完成后有个缺陷,在滑过的时候,第一次可能是空白的,然后才显示,因为要下载图片,网速慢的时候更加明显.其实用CSS实现更容易,而且不会出现上面 ...
html鼠标自动向下滑动,基于JavaScript实现鼠标向下滑动加载div的代码
new document .tp{height:60px;width:100%;} var T=0; $(window).scroll(function() { T=$(document).scrol ...
1.2鼠标移入移出改变背景色和其他大小样式
功能:鼠标移入div,背景色变为绿色,宽变小,长变大,移出恢复原状事件:onmouseover,onmouseout 属性: background,width,height <!DOCTYPE ...
JavaFX鼠标移入后改变样式
实现效果: 正常鼠标样式触发之后的鼠标样式可以看到鼠标放上去的时候已经变成了手的形状. 实现步骤(采用FXML+Controller的形式) 1.FXML 注意fx:controller不要写错了 ...

php鼠标已入移除,原生javascript学习：鼠标移入移出改变样式

php鼠标已入移除,原生javascript学习：鼠标移入移出改变样式相关推荐

最新文章

热门文章