原生js拼接html的时候,加隐藏类名,去掉类名样式丢失

2024-11-04

js的append拼接html丢失css样式解决

htmlApp += "<li id='leftli"+lunci+"'>"; htmlApp += "<span id='leftlunci"+lunci+"'>"; htmlApp += "第"+lunci+"轮"; htmlApp += "</span>\n"; htmlApp += "<span id='le

为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件

为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件headr.inc中加入js代码: if(screen.width > 1024){ document.write('<link rel="stylesheet" type="text/css" href="${path}/nrmus/etc/cs

原生JS与jQuery文档加载完毕的写法

HTML是有执行顺序的,默认是自上而下执行.所以当我们的js代码在html代码下边的时候,可以正常执行,而当我们的js代码在html代码上边的时候,可以就无法正常执行了,这时,我们需要在文档加载完毕的时候才去执行js代码,所以通常我们会这样做: 一.当不引入jQuery框架,只写原生JS代码时,需要用window对象的onload事件 window.onload = function(){ //要执行的js代码段 } (注:在使用时,window.onload可直接简写成onload,但是为了不

原生js - 两种图片懒加载实现原理

目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 getBoundingClientRect Element.getBoundingClientRect() 方法返回值是一个 DOMRect 对象,包含了该元素一组矩形的集合:是与该元素相关的css边框集合(top, left, right, bottom). 我们可以采用如下方法来判断是否在可视区域:

原生js如何获取当前所加载网页的文件路径和名称

结合使用string对象中的substr()和lastIndexOf()方法. 当前页面路径:file:///C:/Users/Administrator/Desktop/test.html <pre name="code" class="javascript"><script> var filename=window.location.href; filename=filename.substr(filename.lastIndexOf(&

用原生JS写一个网页版的2048小游戏（兼容移动端）

这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online-game/ github地址:https://github.com/Yuan-Yiming/2048-online-game ==================================================================== 下面简单分析一下JS代码: 1.游

原生js打地鼠

我们要做的是一个打地鼠的游戏,只用原生js 1.导入需要的图片 2.编写页面css样式demo.css *{ margin:0; padding:0; } .game{ position: relative; width:750px; height:600px; margin:100px auto; } .ground{ position: relative; width: 750px; height:550px; background:url('./images/bg_canvas.png')

原生js获取display属性注意事项

原生js获取diaplay属性需要在标签上写行间样式style='display:none/block;' <div style="display:block;"></div> <script> let divBox = document.getElementsByTagName('div')[0]; divBox.style.display </script>

原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动显示. 页面显示的不是第一平时,当鼠标指针滑动到页面的头部区域,导航栏向右滑出:鼠标指针移出头部区域时,导航栏向左滑动隐藏. 当视口尺寸小于768px时,切换页面不隐藏导航条,但是导航条的项目要隐藏,通过点击按钮来显示和隐藏项目. 本篇代码是重构前的代码. HTML代码: <!DOCTYPE htm

原生js移动端touch事件实现上拉加载更多

大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.getElementsByTagName("div")[0]; //给元素绑定监听事件个人习惯把监听事件写在一块 objSection.addEventListener("touchstart", touchStart, false); objSection.addEve

原生JS实战：分享一个首页进度加载动画！

本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途! 早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加载太快,根本看不到动画效果,直接就加载'Complete'了,算了,还是不要把博客搞得太臃肿了! 于是我就写了个演示页面,在body里加了个iframe来加载大一点的网站,这样就看出效果了! 用Safa

JQuery和原生JS跨域加载JSON数据或HTML。

前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $.ajax({ type: "get", async: false, url: "http://localhost:13964/getpage.ashx?callback=?",//服务端URL,该URL返回一段JS数据.如需返回HTML,只需把HTML组织成JSON即可

页面性能优化-原生JS实现图片懒加载

在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载.这样做的好处是:1.可以加快页面首屏渲染的速度:2.节约用户的流量. 一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址. 2.当滚动页面时,检查所有的img标签,判断是否出现在事业中,如果

原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用

优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动端开发中,用户上传图片宽高不一致而导致的图片变形的问题 3.简洁的API,让你分分钟入门!!! 代码如下[默认模式,不对图片进行剪切]:<!DOCTYPE html><html lang="en"> <head> <meta charset=&qu

关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深水坑我就不多赘述了. 2.问题引入: 当我通过Ajax从后端取到需要展示的数据,拿过来动态渲染到页面上,增加Dom元素是常有的事,这个时候就会报错说Echarts没有获取到元素id. 3.解决方案: 至于要在外面包一个延时器,当然我试了一下即使把延时时间改到0也是能够顺利加载的. 暂时就这么解决了这

jquery/原生js/css3 实现瀑布流以及下拉底部加载

思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ position: relative; margin: 0 auto; text-align: center; } #container div{ padding: 10px; position: absolute; } #container div img{ padding: 10px; width: 200px;

原生js实现上拉加载

原生js实现上拉加载其实超级简单,把原理整明白了你也会,再也不用去引一个mescroll啦~ 好了,废话不多说,开始进入正题:上拉加载是怎么去做的,原理就是监听滚动条滑到页面底部,然后就去做一次请求数据.那么只要我们对滚动监听即可. 现在,让我们来看代码: window.onscroll = function () { var scrollH = document.documentElement.scrollHeight:// 文档的完整高度 var scrollT = document.doc

原生JS的移入溢出控制div的显示与隐藏

原生JS的移入溢出控制div的显示与隐藏的写法上面的写法火狐存在兼容性

原生js与jquery加载页面元素比较

原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascript"> window.onload = function(){ ...... }; </script> jquery:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快. <

【原生JS插件】LoadingBar页面顶部加载进度条

先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上. 网上搜了一下,看到几种页面loading的方法: 1.在body头部加入loading元素,在body页脚写入脚本让loading元素消失. 2.基于jquery,在页面的不同位置插入脚本,设置滚动条的宽度. 简单分析一下: 第一个明显不是我想要的. 第二个要在body前加载jquery,然后还

【面试篇】寒冬求职季之你必须要懂的原生JS(中)

互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在,很显然是不行了.本文梳理出了一些面试中有一定难度的高频原生JS问题,部分知识点可能你之前从未关注过,或者看到了,却没有仔细研究,但是它们却非常重要. 本文将以真实的面试题的形式来呈现知识点,大家在阅读时,建议不要先看我的答案,而是自己先思考一番.尽管,本文所有的答案,都是我在翻阅各种资料,思考并验

原生js拼接html的时候,加隐藏类名,去掉类名样式丢失

热门专题