YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » JavaScript » Archive by category "DOM"

JavaScript动态创建的Link标签插入到 head 的最前面会怎么样?

JavaScript动态创建的Link标签插入到 head 的最前面会怎么样?

由于本人还是蓝色理想论坛前端的实习版主,所以也把文章《如何用JavaScript动态创建link标签到head里》发到了论坛里(由于我的一个乌龙,1年前测试的时候,发现过IE6直接插入head有问题)有个叫sicoolqs朋友认为我的处理方式(当时还做了浏览器的探测)过于的复杂了,给出了更加简洁的处理方案: var head = document.getElementsByTagName(“head”)[0]; var link = document.createElement(“link”); link.setAttribute(“href”,”xxx.css”); link.setAttribute(“rel”,”stylesh… [阅读全文]

为什么要用JavaScript 动态创建样式表link标签?

为什么要用JavaScript 动态创建样式表link标签?

我前面的文章《如何用JavaScript动态创建link标签到head里》只是一笔带过,发现论坛里有朋友问到了这个问题,我这里就花些篇幅来解释一下。为什么要用JavaScript 动态创建样式表标签?为什么不直接用JavaScript来修改样式? 简单的说,这么做有3个目的: 为了提高页面的加载速度。只在需要的时候才加载相应的样式,减少页面初次加载时(CSS样式)的数据量,从而提交页面的加载数度。 为了提高代码的可维护性和稳定性。将CSS代码和JavaScript代码分离,是我们前端开发一直推荐的编码规范之一。将CSS和JavaScript写在一起,代码的可维护性和稳定性都会受到影响。 为了提高JavaScript代码的性能。通过给… [阅读全文]

JavaScript 如何判断 CSS 文件加载完毕

JavaScript 如何判断 CSS 文件加载完毕

之前我写过《如何用JavaScript动态创建link标签到head里》,今天接着这个话题说下去,说说 JavaScript 如何判断 CSS 文件记载完毕。呵呵,今天的话题应该算是上个话题的姊妹篇。我们动态创建的CSS文件,如何知道添加的CSS文件加载完毕了呢? 要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: // 代码节选至seajs function styleOnload(node, callback) { // for IE6-9 and Opera if (node.attachEvent) { node.at… [阅读全文]

如何用JavaScript动态创建link标签到head里

如何用JavaScript动态创建link标签到head里

我想应该有不少做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签——link标签。这次我就说说如何在浏览器中动态创建link标签。 演示地址:http://www.yaohaixiao.com/scripts/js-create-link-tag.html 使用 jQuery 创建 link 标签 如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的: var cssURL = ‘http://www.yaohaixiao.com/wp-content/themes/BlueNight/style.css’, linkTag = $(‘<link href=”‘ + cssURL +… [阅读全文]

JavaScript DOM编程实例教程 – 垂直无缝滚动图片

JavaScript DOM编程实例教程 – 垂直无缝滚动图片

垂直无缝滚动图片的效果是一个经常用到的效果,今天我就来跟大家实例讲解一下这个效果的实现原理,首先我们看看演示效果: 演示地址:http://www.yaohaixiao.com/scripts/scrollnews/ 下载地址:http://www.yaohaixiao.com/downloads/scrollnews.rar 在讲原理之前,我先把代码贴出来,JavaScript代码如下: // scrollver.js // 代码来源:yahoo.com.cn scrollVertical.prototype.scrollArea=null; // 滚动的区域 scrollVertical.prototype.scrollMsg=… [阅读全文]

IE浏览器中JavaScript动态创建checkbox,如何让它默认选中

IE浏览器中JavaScript动态创建checkbox,如何让它默认选中

在开发一个手机短信通讯录的前端界面时,界面中使用了checkbox作为各项的选择控件,但是操作时出了点差子。由于逻辑需要,需要预先选中用户上次选中的那些项目。但是当我使用JavaScript DOM编程动态创建checkbox时,在IE系列浏览器中(IE6中),直接设置checkbox控件的checked=checked属性是无法让它默认选中。示例代码如下: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta http-equiv=”content-language” content=”en” /> <… [阅读全文]