HTML属性的长度问题
摘要：越来越多的同学喜欢把数据存放在html属性上，比如xxx一堆JSON数据放在data-info里。存放的属性值有长度限制吗？如果有最大长度是多少？分别从HTML4和HTML5的规范去查看。HTML43.2.2节介绍Attribute，里面没有提到长度的限制。SGMLHTML4来源于SGML，看看SG...
阅读全文
posted @ 2014-11-18 07:01
Snandy
If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ends of strings that somebody else pulls.
随笔分类 - HTML
HTML5 datalist 标签
摘要：以前需要用JS写一个自动完成组件（Suggest），很费劲。HTML5时代则不用了，直接使用datalist标签，直接减少了工作量。如下 HTML5 datalist tag 浏览器版本： datalist提供一个事先定义好的列表，通过id与input关联，当在input内输入时就会有自动完成（autocomplete）的功能，用户将会看见一个下拉列表供其选择。效果如下Chrome/Firefox/Opera和IE10+均已支持，S...
阅读全文
posted @ 2014-03-01 16:39
HTML5图片预览
摘要：两种方式实现URLFileReader html5 图片上传预览 URL.revokeObjectURL方法Opera不支持，FileReader除IE9及以下不支持，其它浏览器都支持。相关：https://developer.mozilla.org/en-US/docs/DOM/window.URL.createObjectURLhttps://developer.mozilla.org/en-US/docs/DOM/window.URL.revokeObjectURL
阅读全文
posted @ 2012-11-26 17:02
Safari/Chrome中placeholder属性实现不完整
摘要：placeholder属性是HTML5中提出的，目前Firefox/Safari/Chrome/Opera都已经实现了。IE9仍然没实现。但Safari/Chrome中有个问题，点击文本框内文字不消失。如下<!DOCTYPE html><html> <head> <title>Safari/Chrome中placeholder属性实现不完整</title> <meta charset="utf-8"> </head> <body> <p> <input type
阅读全文
posted @ 2012-04-20 08:05
仅img元素创建后不添加到文档中会执行onload事件
摘要：示例<!DOCTYPE HTML><HTML> <HEAD> <meta charset="utf-8" /> <title>仅img元素创建后却不添加到文档中会执行onload事件</title> </HEAD> <BODY> <script> var img = document.createElement('img'); img.src = "http://www.sinaimg.cn/rny/sinamail57/skins/1103
阅读全文
posted @ 2011-07-11 09:43
html5中可通过document.head获取head元素
摘要：今天，看一个国外网站发现人家获取head元素如下var head = document.head || document.getElementsByTagName('head')[0];后面的是我们常用的方式，前面的document.head 着实第一次见。查资料发现原来是html5的东东。的确简单了，一个属性搞定。当然，IE6/7/8不支持。IE9/Safari/Chrome/FF/Opera均支持（最新版本）。记录下。html4中HTMLDocument接口如下html5中HTMLDocument接口如下相关：http://www.w3.org/TR/DOM-Level-2
阅读全文
posted @ 2011-04-25 16:33
解决Firefox下outerHTML不支持问题
摘要：代码很简单，如下：var pro = window.HTMLElement.prototype;pro.__defineGetter__("outerHTML", function(){ var str = "<" + this.tagName; var a = this.attributes; for(var i = 0, len = a.length; i < len; i++){ if(a[i].specified){ str += " " + a[i].name + '="' + a[i]
阅读全文
posted @ 2011-03-22 08:15
用事实证明cssText性能高
摘要：首先要感谢 EtherDream 的不同观点，在 巧用cssText属性批量操作样式 一篇中由于他的质疑态度使我做了进一步的测试。<!DOCTYPE HTML><html><head><meta charset="gbk"><title>事实证明cssText在多数浏览器中性能较高</title></head><body><input type="button" value="测试1" onclick="test1()&qu
阅读全文
posted @ 2011-03-13 22:11
巧用cssText属性批量操作样式
摘要：给一个HTML元素设置css属性，如var head= document.getElementById("head");head.style.width = "200px";head.style.height = "70px";head.style.display = "block";这样写太罗嗦了，为了简单些写个工具函数，如function setStyle(obj,css){ for(var atr in css){ obj.style[atr] = css[atr]; }}var head= document
阅读全文
posted @ 2011-03-12 08:25
children和childNodes
摘要：1，childNodes 属性，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。有些人错误的使用()去取该集合元素，下表列出各浏览器对childNodes(i)的支持情况：IE6/7/8/Safari/Chrome/OperaIE9/FirefoxchildNodes(i)支持不支持有时候需要获取指定元素的第一个HTML子节点（非属性/文本节点），最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行，空格，那么firstChi
阅读全文
posted @ 2011-03-11 08:30
设置HTML元素的透明度
摘要：W3C标准属性是opacity,现代浏览器都支持，但IE6/7/8却不支持该属性。在Firefox，Safari，Opera，Chrome中测试都支持opacity。如设置div的透明度为40%。<!DOCTYPE HTML><html> <head> <title>set div opacity</title> <style> .wrapper { border:solid 1px gray; opacity:0.4; } </style> </head> <body> <div
阅读全文
posted @ 2011-03-09 09:18
