HTML/DOM/CSS
关注
分享
扫一扫
魔豆爸
擅长Web开发前端技术，具有多种浏览器下开发经验。精通 JavaScriptAJAX编程熟练使用主流JS库。手写JS能力强，运用无干扰的JS思想进行开发。熟练使用CSS及DHTML，W3C标准的推广和贯彻者。熟悉Java语言,MVC设计模式,StrutsSpring架构
展开
-
html P包含DIV
abcc项目中碰到的，在一个表单中用P包含一个label和div，从firebug中看html结构div却跑到P外面去了。甚是诧异，原来块级元素P是不能包含DIV的。 以下是html片段 <p> <label for="username">用戶名：</label> <div> <select name="u...2009-03-04 11:11:19 · 172 阅读 · 0 评论 -
JavaScript判断图片是否加载完成的三种方式
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。 一、load事件<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>img - load event</title>&2016-04-20 10:22:28 · 334 阅读 · 0 评论 -
事件处理程序的执行上下文
以下五种方式添加事件<!doctype html><html> <head> <title>事件处理程序的执行上下文</title> <meta charset="utf-8"> <style>2013-05-28 06:18:26 · 124 阅读 · 0 评论 -
操作class属性的新API--classList
操作class是前端开发中经常需要用到的，尤其在分工细的公司。class几乎是JS工程师与页面构建师的桥梁。几乎所有的流行库都提供了class属性操作的几个方法。如 addClass/removeClass/toggleClass/hasClass。 现在HTML5提供了classList API，除了IE（包括IE9/10），其它现代浏览器均支持该属性。重写了下class属性模块。 ...2011-11-21 19:02:02 · 154 阅读 · 0 评论 -
书写css伪类时冒号前或后多个空格导致该规则失效
相信多数开发者不会多个空格。是偶然发现的，网上多数css格式化将压缩后的css格式化后会发生这个情况。搜“css格式化”，以下网站http://www.jb51.net/tools/cssyasuo.shtmlhttp://www.ttmouse.com/geshi.html格式化后会多出个空格，多出空格后样式规则失效了。 <!DOCTYPE html>...2010-12-07 09:15:47 · 153 阅读 · 0 评论 -
各浏览器中鼠标按键值的差异
我们知道标准鼠标有左，中，右三个键。鼠标按下时如何判断按下的是哪个键呢？W3C DOM-Level-2 定义如下W3C DOM 写道During mouse events caused by the depression or release of a mouse button, button is used to indicate which mouse button changed...2010-11-27 12:00:06 · 162 阅读 · 0 评论 -
css非标准的ime-mode属性
ime是Input Method Editor的简称它是一种专门的应用程序， 用来输入代表东亚地区书面语言文字的不同字符。使用此种输入法，不需特殊的键盘（对应各种语言的键盘）即可输入东亚诸国（如中文、日文、韩文、俄文等）的各种文字。日本IME，是可以输入表音文字 (かな)与変换表意文字 (汉字) 的 一种输入法，而且它具有人工智慧，可以将一般较常使用的表意语句置于输入法的词库中。日本IME...2010-10-20 18:14:18 · 196 阅读 · 0 评论 -
IE9分离attribute与property
IE6/7/8(Q)中元素的attribute与property内部实现是不分的，IE8部分分离，IE9实现彻底分离了。 如下：<div id="myId" class="cls" userAttribute="test1"><script type="text/javascript">var div = document.getEleme2010-09-07 14:56:20 · 100 阅读 · 0 评论 -
DOM3 textInput事件
DOM3中引入了文本事件，其中之一 textInput。当用户再可编辑区域输入字符时触发该事件。与keypress不同的是，该事件只会在用户输入可视字符时触发，而keypres事件则只要按下键即触发(如CapsLock，Backspace)。可看到textInput考虑的主要是字符，可以通过事件对象的data属性获取所输入字符。示例如下 <!DOCTYPE HTM...2010-12-15 16:29:27 · 142 阅读 · 0 评论 -
元素内联事件的真相
引子是JS1群中的Mead Lai提出的问题，如下<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test case</2010-12-13 18:04:08 · 165 阅读 · 0 评论 -
firefox下绝对定位元素重叠造成不可点击问题
重构地图网站过程中碰到的，firefox下（无论诡异模式或标准模式）当两个绝对定位的div发生重叠（即一个div盖在另一个div上）时，下面的div变得不可点击了。解决的方法是设置z-index，z-index值大的就可以点击了。而IE下，即使z-index值高的div，下面的div中的button仍然可以点击。 如下htmlbug重现：<!DOCTYPE HTML PUBLIC...2009-09-09 12:42:31 · 167 阅读 · 0 评论 -
关于cssText属性
给一个html元素设置css属性，如： var head= document.getElementById("head");head.style.width = "200px";head.style.height = "70px";head.style.display = "block"; 这样写太罗嗦了，为了简单些写个工具函数，如： function setS...原创 2010-01-04 18:43:18 · 146 阅读 · 0 评论 -
自定义右键菜单
要给地图添加右键菜单了，类似于google的。先做个demo。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>右键菜单.htm...2009-07-14 15:24:21 · 108 阅读 · 0 评论 -
IE css hack汇总
汇总下IE各版本的css hack。 hack示例IE6(S)IE6(Q)IE7(S)IE7(Q)IE8(S)IE8(Q)**colorYesYesYesYesNoYes++colorYesYesYesYesNoYes--colorYesYesNo...2009-12-21 17:59:25 · 82 阅读 · 0 评论 -
img标签usemap属性
html的img标签：定义一个图像在网页中引入。它还有个usemap属性很有意思。 看看51ditu首页中有一个地图，中部有个中国地图。点击右键下载下来看下就是一个普通的图片。 但点击地图上的省份却可以出发不同的事件（或打开不同的链接），很有意思。原来是使用了usemap属性。 当然还要定义一个map标签。整份代码如下： <html><head...2009-06-23 09:14:11 · 434 阅读 · 0 评论 -
img标签的galleryimg属性
地图api中有以下代码 var img=document.createElement("img");img.galleryImg=false;//img.galleryImg="no"; img标签的galleryimg属性只在IE6下起作用，是个过时的属性。它的作用是设置是否显示图片工具条(Image Toolbar) 即鼠标放在图片上时会出现如下提示，可以方便用户保...2009-05-13 15:24:56 · 340 阅读 · 0 评论 -
设置html元素的透明度
w3c标准属性是opacity,firefox3.5支持，但IE却不支持该属性（即使是最新的IE8）。 在FF3.5++，safari4，opera10，chrome4中测试都支持opacity。如设置div的透明度为40%：<!DOCTYPE HTML"><html> <head> <title>set div op...2009-09-16 14:37:33 · 230 阅读 · 0 评论 -
去掉点击链接后的虚线框
点击一个超链接后默认会有一个虚线框，有时候要求去掉它。 firefox及标准浏览器下可以用css属性outline：<style> a { outline:none;/*0也可以*/ }</style> IE下如下实现（据说过多使用效率低）：a{ blr:expression(this.o...2009-09-16 13:49:26 · 144 阅读 · 0 评论 -
HTML5 datalist 标签
以前需要用JS写一个自动完成组件（Suggest），很费劲。HTML5时代则不用了，直接使用datalist标签，直接减少了工作量。如下<!DOCTYPE html><html> <head> <title>HTML5 datalist tag</title> <meta charset="utf-...2015-07-09 14:39:19 · 185 阅读 · 0 评论