网站前端开发三个实用的小技巧

在进行网站开发的时候，如何合理使用代码标签让网站建设更简单?成都网站开发公司工作人员教你以下三个小技巧，让前端开发更轻松。

一、a标签打开与刷新页面标签作为常用标签，当跳转链接时，常用属性target，

_self：默认值。在相同的框架或窗口中载入目标文档。即当前;

_blank：在一个新的未命名的窗口载入文档。即新开窗口;

_parent：把文档载入父窗口或包含了超链接引用的框架的框架集，如果没有，则行为类似_self。即上级窗口中;

_top：把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架。如果没有上下文环境，则行为类似_self。即顶级窗口中。

不过，target属性还有一个特征，可以自定义内容或URL。

二、网页一键换肤优化实现将一个网页的颜色相关一键切换

links[0].href = val

通过JS控制标签的href属性切换引用的css文件

弊端：如果网站需要切换的内容过多，每次引用CSS的加载会有一定量的延时，不具有流畅感，交互体验较差。

有趣的title属性 在实现一键换肤的其他方法之前，要聊一下这个在标签中的title属性。

当标签具有title属性且有值时，link标签就变成一个可控制的特殊元素，即可以通过DOM对象的disabled属性控制link是否渲染。

但是，在实测过程中，除IE外无论link标签是否具有title属性，都可以直接使用DOM对象的disabled属性，但IE确实需要title。

let links = document.getElementsByTagName('link'); links = [].slice.call(links); links[0].disabled = true;

alternate备选 在标签中，rel属性有很多值，常用的是stylesheet，但是还有一个alternate表示当前文档的替代版本，也就是加载但不执行。

利用这个特性，结合DOM对象的disabled属性，可以提前加载另一套css方案，解决交互性问题。代价是多一点点流量。

三、CSS矢量图内联在前端项目中，使用到的图标类大多会使用SVG来实现，静态文件的减少有利于性能的提升。当然，可以用静态资源缓存(blog链接)减少文件请求，高速渲染，引用地址使用内联，即直接将SVG放入路径(不建议超级大图，会极大增加文件体积)。

采用base64

采用标签直接内联

在直接引入之前，需要对一些特殊符号进行转译"，%，#，{，}，<，>。(IE也兼容的!)

标题名称：网站前端开发三个实用的小技巧
本文来源：https://www.cdcxhl.com/news49/84799.html

成都网站建设公司_创新互联，为您提供网站建设、小程序开发、搜索引擎优化、品牌网站建设、品牌网站设计、网站营销

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联