开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

单击时的正文元素原生js

是指通过使用JavaScript编写的代码，在单击时操作网页上的正文元素。它可以用来实现一些交互功能，例如在用户点击某个元素时执行特定的操作或显示相关内容。

正文元素指的是网页的主体内容，即不包括头部（header）和底部（footer）的部分。在HTML中，正文元素通常被包含在<body>标签内。

以下是一个示例代码，展示了如何使用原生JavaScript实现单击时的正文元素操作：

document.body.addEventListener('click', function(event) {
  // 获取被点击的元素
  var targetElement = event.target;

  // 执行特定的操作
  // 例如修改元素样式、显示隐藏的内容等

  // 示例：当点击正文元素时，改变背景颜色
  targetElement.style.backgroundColor = 'red';
});

上述代码中，通过addEventListener方法给正文元素绑定了一个click事件监听器。当用户单击网页中的任意位置时，事件会触发，并且传递一个包含有关事件的信息的event对象。

可以通过event.target属性获取被点击的元素。然后，可以根据需要，对该元素进行各种操作，例如修改样式、添加或移除类、显示或隐藏内容等。

对于更复杂的操作，可以结合其他JavaScript库或框架来使用，例如React、Vue或jQuery等。根据具体的需求，选择适合的库或框架可以简化开发过程并提高效率。

对于云计算领域，使用单击时的正文元素原生js的实际场景可能较少。然而，它可以在网页开发中起到一定的作用，特别是当需要对网页中的某些元素进行动态交互时。

腾讯云提供了丰富的产品和服务，以满足各类云计算需求。具体的产品选择取决于具体的场景和要求。您可以通过访问腾讯云官方网站（https://cloud.tencent.com/）来了解更多有关腾讯云的信息和产品介绍。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

原生js添加元素

大家好，又见面了，我是你们的朋友全栈君。...今天做页面使用的mui，因为使用mui情况下无法使用jquery，于是在ajax请求完毕添加元素的时候发现自己竟然对原生js添加元素的方法有点模糊了，真是越活越倒退了，赶紧整理一波。...首先最简单的innerHTML，这个不想多说，入门新手喜欢这么用，但他的缺点也很明显：不管你渲染部分还是全部，始终需要替换原先所有的子元素，也就是需要重复渲染，会增加浏览器压力。...接下来就是正题了，js推荐是这样进行元素添加： 1.创建游离元素节点：let div=document.createElement(“div”); 2.给创建元素添加属性：div.setAttribute...”)； 4.将文本节点添加到元素节点中div.appendChild(textNode); 5.加元素节点插入文档：Parent.appendChild(div); over 发布者：全栈程序员栈长，转载请注明出处

8.9K2 0

原生JS 实现元素排序

原生...JS 实现元素排序 * { margin: 0; padding:...y: e.pageY || e.clientY + document.body.scrollTop } } //获取元素位置...el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop } } //获取元素尺寸...false; } //判断是否有挪动 var MOVE = {}; MOVE.isMove = false; //就是创建的标杆

3.3K3 0

原生JS实现拖拽元素时与另一元素碰撞检测

给大家分享一个用原生JS实现拖拽元素时与另个一元素碰撞检测的小Demo，效果如下： ? 实现代码如下，欢迎大家复制粘贴。原生...JS实现拖拽元素时与另个一元素碰撞检测 #div1 { width: 100px; height:...oDiv.offsetLeft; var disY = oEvent.clientY - oDiv.offsetTop; // 鼠标移动时...offsetTop; var b2 = oDiv2.offsetTop + oDiv2.offsetHeight; // 碰撞检测的规则

1.7K1 0

原生JS实现拖拽缩放元素

今天给大家分享一个用原生JS实现的拖拽缩放元素大小的Demo，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。原生...JS实现拖拽缩放元素 #div1 { width: 11px; height: 11px;...document.onmousemove = function (ev) { var oEvent = ev || event; //要加上子DIV的大小

5.5K2 0

原生js动态添加元素

大家好，又见面了，我是你们的朋友全栈君。原生...js动态添加元素 .phone { width: 200px; height: 30px;.../ul> var formId = document.getElementById("form"); // 创建元素...input var inputPhone = document.createElement("input"); // 设置input的属性

6.8K2 0

原生JS 实现页面元素的拖动拖拽

实现原理要实现页面元素的拖动，其原理就是根据鼠标的移动实时的更改元素的left 和 top值（当然元素肯定是要做绝对定位的），那么就达到我们要的效果了呀！...鼠标的位置是可以通过 e.clientX 获取的，通过获取的值减去鼠标和目标元素之间的偏移量，就是我们的 left 值了呗, top值是同理的，不过记住要设置界限哟，不然跑出去了。... window.onload = function () { // 目标元素...和目标元素之间的偏移量 var x = e_down.clientX - e_down.target.offsetLeft; var y = e_down.clientY - e_down.target.offsetTop...; // 我们想要拖拽元素，其实就是根据鼠标的移动实时的更改元素的left 和 top值 // 鼠标的位置是可以通过e.clientX 获取的，然后减去x 不就是我们的left值了 //鼠标移动，肯定是在按住的情况下移动的嘛

5.3K3 0

原生JS滚动鼠标改变元素大小

今天要分享的是运用原生JS滚动鼠标改变元素大小，效果如下：以下是代码实现，欢迎大家复制粘贴。原原生...JS滚动鼠标改变元素大小 #div1 { width: 200px; height: 200px;

9.2K2 0

原生JS动态添加、删除元素&内容

整理一下原生 js 添加及删除元素和内容的相关知识，供参考。... 刀是我拿的，人是我杀的一个容器，用来放添加的元素。一个button按钮，用来动态的操作DOM。...初始js代码： var container = document.getElementById("container"); var Element = document.getElementById("...= null) paras[i].parentNode.removeChild( paras[i]); } 清空元素：清空一个元素，即删除一个元素的所有子元素 function removeAllChild...() { var div = document.getElementById("div1"); while(div.hasChildNodes()) //当div下还存在子节点时循环继续

27.3K4 0

js原生如何获取网页元素

获取网页元素是前端开发过程中的基础知识，可以通过DOM操作来实现。DOM（文档对象模型）是一种表示和操作html,xml和svg文档的标准编程接口。...javascript需要掌握的常见方法有：1、getElementById：是指根据指定的 id 属性获取指定的元素。...示例：var phone= document.getElementById("phone");2、getElementsByClassName：是指通过元素的class属性获取指定元素集合。...示例：var x = document.getElementsByClassName("example");3、getElementsByTagName：通过标签名获取指定的元素集合。...示例代码：var div = document.querySelector("div");5、querySelectorAll:通过CSS选择器获取所有符合条件的元素集合。

911 0

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

原生js与jquery加载页面元素比较原生js：将获取元素的语句写到页面头部，会因为元素还没有加载而出错，js提供了window.onload 这个方法事先加载元素 // 1 原生js加载页面元素，window.onload...：原生js加载页面元素通过window.onload()方法 jquery加载页面元素通过ready()方法开发中常用jquery的ready简写写法使用jquery需要事先下载jquery库(压缩版和完整版...要快的原因是，window.load是等标签加载完，渲染(一些资源文件，如图片，音乐等)完之后再执行，ready是个标签加载完就执行声明：本文为原创，作者为对弈，转载时请保留本声明及附带文章链接：http

11.4K3 0

原生JS如何获取当前元素属于父元素第几个子元素

包含文本和注释节点原生JS有一个常见的小技巧那就是通过元素的previousSibling 属性，额外需要注意的是该属性会遍历text节点，即回车键。...从零开始我们可以这样的代码获取到一个元素属于父元素的第几个子元素。 var child = this; while( (child = child.previousSibling) !...= null ) i++; 案例代码如下： Html: 123abc JS...= null) i++; console.log(i) //console 1 通过循环遍历previousSibling 属性是否为null这个小技巧，就可以获取到当前元素在父元素中的位置了。

10.3K5 1

原生JS拖拽进度条改变元素大小

今天要分享的是运用原生JS拖拽进度条改变元素大小，效果如下：以下是代码实现，欢迎大家复制粘贴。原生...JS拖拽进度条改变元素大小 #parent { width: 400px; height: 20px...oDiv.onmousedown = function (ev) { var oEvent = ev || event; //计算鼠标相对滑块上的位置...} oDiv.style.left = l + 'px'; //计算拖拽移动距离与可拖动总范围的比例

4.6K2 0

漫谈原生JS添加元素的两种方法

大家好，又见面了，我是你们的朋友全栈君。...漫谈原生JS添加元素常规方法常规方法是首先创建一个目标元素并赋值给某个变量 ,但是元素里面内容较多,需要innerHTML赋值，将含有内容的变量赋值给目标元素的变量，最后，将这个目标元素的变量通过appendChild...此时添加的目标元素直接用字符串形式赋值到变量中。最重要的是注意引号的变化，外单内双或外双内单。...”，字符串的名）插入的位置可以选择以下属性值： beforebegin–>元素自身的前面 afterbegin–>插入元素内部的第一个子节点之前 beforeend–>插入元素内部的最后一个子节点之后...afterend–>元素自身的后面发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/152095.html原文链接：https://javaforall.cn

2.6K1 0

当鼠标按下时拖动元素，简单的JS实现

记录监听需要移动元素的键盘按下、松开事件和文档对象的鼠标移动事件，通过一个布尔值作为是否移动的标志，按下时为TRUE，代表跟随移动，鼠标松开为FALSE，代表不跟随移动，鼠标移动时改变元素偏移量。

3.7K5 0

Fabric.js 元素被选中时保持原有层级🥁

不知道你在使用 Fabric.js 时有没有发现，如果一个画布存在多个元素，而且它们之前是层叠的，当你选中底层的元素时，那个元素会跳到最顶层；当你释放该元素后，它又跑回原有层级。...这是 Fabric.js 的默认状态。...如果你不希望操作时出现这种情况，你希望在元素被选中时还保持它原有的层级，那么我推荐你在初始化画布时，设置 preserveObjectStacking 为 true 。...所以最终出来的效果是圆形在矩形下面。 Fabric.js 默认情况下，被选中的元素会跳到顶层，所以你可以看看上图的操作效果。..., { // 元素对象被选中时保持在当前z轴，不会跳到最顶层 preserveObjectStacking: true // 默认false }) 复制代码代码仓库 ⭐元素被选中时保持原有层级

2.5K4 0

原生JS拖拽进度条改变元素透明度

今天要分享的是运用原生JS拖拽进度条改变元素透明度，效果如下：以下是代码实现，欢迎大家复制粘贴。原生...JS拖拽进度条改变元素透明度 #parent { width: 400px; height: 20px...oDiv.onmousedown = function (ev) { var oEvent = ev || event; //计算鼠标相对滑块上的位置...} oDiv.style.left = l + 'px'; //计算拖拽移动距离与可拖动总范围的比例

3.7K1 0

原生JS | 随机抽取不重复的数组元素 —— 有没有更好的方法？

HTML5学堂-码匠：从数组中随机抽取不重复的元素，构成新数组，拥有多种方法，来看看你用的方法性能如何？效果的功能需求从一个数组当中，随机抽取数个元素，构成新数组，要求这些元素不能重复。...方法1：较为“传统”的实现方法基本实现思路从第二次随机抽取的元素开始，需要将抽取的元素与当前新数组的已抽取元素相比较，如果相同，则重新抽取，并再次执行比较的操作。...方法2：标记法 / 自定义属性法基本实现思路当获取新元素时，为该元素添加一个属性标记，再抽取一个元素之后，先判断是否有属性标记，如果已被标记，则说明该元素已被抽取，此时重新抽取。...基本实现思路该方法的基本原理是，在抽取一个元素之后，将该元素与数组末端的最后一个元素交换，然后将数组最后一个元素扔掉。...也就是说，我们只要保证当前元素被末尾元素替代，并不断减小随机数范围，“数组长度”和“数组末尾的元素值”是可以忽略的。

9.3K5 0

原生js的笔记

引入Javascript 的方式有三种 1.在html 中直接放到 2.外部引入js文件 3.在标签直接写 <p...2、以驼峰命名规则 ——开始单词小写后面的单词首字母大写例如 helloWorld boyAge suZiXing 保留字 js中大小写严格区分的 alert弹框 String（）保留字不能用于普通表示符...函数可以封装一些功能（代码），需要时可以执行这些代码。 function功能的意思封装好的函数必须调用才执行，不调用不执行。...全局作用域：在js中作用域：一个变量作用的范围 1、全局作用域（整个标签中）：页面打开全局作用域被打开，页面关闭全局作用域被销毁；全局作用域的变量叫全局变量，全部变量可以在全局作用域中使用...构造函数创建Person：构造函数就是普通函数,创建时与普通函数一样。构造函数的名称是首字母大写，调用时，普通函数是直接调用；构造函数时通过 new 关键字调用。构造函数，是一种特殊的方法。

921 0

原生JS的Ajax

转自：https://www.cnblogs.com/yufann/p/JS-Ajax.html 1.创建一个Ajax对象非IE6浏览器：var obj = new XMLHttpReuqest...Date().getTime(),true); 3.发送请求 obj.send(); 4.接收返回值请求状态监控:onreadystatechange事件：当自己的Ajax...与服务器之间有通讯时触发主要通过readyState属性来判断有没有结束，结束了也并没有成功，status属性来判断 1....---返回值responseText:从服务器返回的文本：obj.responseText（返回的为字符串） GET方式 function getAjax(){ var obj

11.1K2 0

用几行原生JS就可以实现丝滑的元素过渡效果！

大家可以看下下面这个应用的页面切换体验，是不是很丝滑～做过体验优化的朋友应该都清楚，如果用原生的 CSS 或者 JS 动画去实现，想要实现出类似的效果，不会特别简单，而且也要考虑性能问题。...Shared Element Transitions 是一个新的 script 提案，它可以帮助我们在 SPA 或者 MPA 页面中实现元素过渡效果。...if ('documentTransition' in document) { // Feature supported } 这个提案主要分为两部分，第一个是完整的根过渡，第二个是指定一组共享元素进行过渡...，比如下面几点：过渡的页面会失去动画效果：过渡的页面会被捕获为单个帧，如果被过渡的元素上有一些 gif 或者 CSS 动画，可能会失效。...共享元素过渡你还可以指定一组特定的元素进行过渡，可以参考下面的效果（加了过渡状态的 preact 官网）：「https://preact-with-nav-transitions.netlify.app

2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭