首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js如何动态选择和操作 CSS 伪元素,例如 ::before 和 ::after

比如伪元素 :before和:after,用于在css渲染中向元素的头部或尾部插入内容,它们不受文档约束,也不影响文档本身,只影响最终样式。...这些添加的内容不会出现在DOM中,仅仅是在css渲染层中加入。 它不存在于文档中,所以js无法直接操作它。而jQuery的选择器都是基于DOM元素的,因此也并不能直接操作伪元素。...哪些是伪元素 :first-letter:向文本的第一个字母添加特殊样式。  :first-line: 向文本的首行添加特殊样式。  :before:在元素之前添加内容。 ...red; }', 0); addRule说明: document.styleSheets[0].addRule('.className'或‘#ID’ +‘::after’,css样式字符串拼接). 3、在标签中插入...因为其他两种通过插入行内CSSStyleSheet的方式是在JavaScript中插入字符代码,不利于样式与控制分离;而且字符串拼接易出错。

6.6K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    表单脚本

    一、表单的基础知识 在HTML中,表单由元素来表示,而在JavaScript中,表单对应的则是HTMLFormElement类型。...(textarea除外,在文本区中回车会换行)。如果表单没有提交按钮,安回车键不会提交表单。 注意,通过上述方式提交表单,浏览器会在将请求发送给服务器之前触发submit事件。...对文件字段来说,这个属性是只读的,包含着文件在计算机的路径 (2)表单字段方法 foucs()获取焦点,激活字段,使其可以响应键盘事件 blur()失去交单。...textbox.focus(); } 部分选择文本的技术在实现高级文本输入框时很有用,例如提供自动完成建议的文本框就可以使用这种技术。...btnNoValidate" /> 三、选择框脚本 和元素创建 HTMLSelectElement的属性和方法: 属性和方法 作用说明 add(newOption, relOption) 向控件中插入新项

    4.8K41

    JavaScript 表单处理

    tabIndex 表示当前字段的切换 type 当前字段的类型 value 当前字段的值 这些属性其实就是HTML表单里的属性,在XHTML课程中已经详细讲解过,这里不一个个赘述,重点看几个最常用的...二.文本框脚本 在HTML中,有两种方式来表现文本框:一种是单行文本框,一种是多行文本框。...原因很简单,对value属性的修改,不一定会反映在DOM中。 除了value值,还有一个属性对应的是defaultValue,可以得到原本的value值,不会因为值的改变而变化。...textField.select();//选中文本框中的文本 选择部分文本 在使用文本框内容的时候,我们有时要直接选定部分文本,这个行为还没有标准。...().text;//获取IE选择的文本 } } PS:有一个最大的问题,就是IE在触发select事件的时候,在选择一个字符后立即触发,而其他浏览器是选择想要的字符释放鼠标键后才触发。

    4.8K101

    知识点 | JavaScript事件浅析

    在addEventListener中addEventListener(event事件名称,function回调函数,是否在捕获或冒泡阶段执行)第三个参数可以改变事件触发时机。...mousemove 鼠标移动 键盘通用事件 keydown 按下键盘 keypress 中间的一个事件 keyup 抬起键盘 textInput 是对keypress的补充,用意是在将文本显示给用户之前更容易拦截文本...在文本插入文本框之前会触发textInput事件。 compositionstart 在IME的文本复合系统打开时触发,表示要开始输入了。...当你使用输入法的时候会触发一下 compositionupdate 在向输入字段中插入新字符时触发。 compositionend 在IME的文本复合系统关闭时触发,表示返回正常键盘的输入状态。...控件事件 input 当内容发生改变的时触发,有可能是代码触发的改动兼容ie的话input propertychange change 当失去焦点时,内容改变触发 blur 失去焦点触发 focus 获得焦点触发

    1.3K30

    JS事件篇

    :获取一个元素的父元素 innertext :获取到一个标签里面的文本内容 获取兄弟节点,也可能会获取到空白节点 获取兄弟元素 节点的属性 通过nodevalue可以设置文本节点的内容 在事件的响应函数中...父节点.appendChild()----向一个父节点中添加一个子节点 整合上面操作的小案例 父节点.insertBefore(新节点,旧节点): 在指定子节点前插入新的子节点 父节点.replaceChild...是双向功能:获取对象的html内容 或 向对象插入html内容 我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容; 也可以对某对象插入内容...,注意DOM标签与标签之间的空白也会被当成文本节点 在IE8一下的浏览器中,不会将空白文本当成子节点,所以该属性再IE8中会返回4个子元素,而其他浏览器都是9个 ---- children属性可以获取到当前元素所有子元素....insertBefore(新节点,旧节点): 在指定子节点前插入新的子节点 <!

    12.6K10

    《javascript高级程序设计》核心知识总结

    在向参数传递引用类型的值时,会把这个值在内存中的地址复制给一个局部变量,因此这个局部变量的变化会反应在函数外部 ② 对象会在函数执行完毕后立即被销毁。...在创建子类型的实例时,无法向父类构造函数传递参数 ② 借用构造函数(在子类型构造函数的内部调用父类构造函数) //此时实例不会共享属性 function Parent(name){...cloneNode不会复制节点的javascript属性,但IE在此存在一个bug,所以建议在复制之前最好先移除事件处理程序 4.访问节点 Node.firstChild[lastChild | parentChild...十四.表单脚本 1.选择文本inputEl.select() [用于选择文本框中的所有文本,不接受参数,可以在任何时候调用] 2.选择事件(select) //ie9+ 用户选择了文本并释放鼠标时触发...表示浏览器是否为当前命令提供用户界面的一个布尔值,执行命令必须的一个值(如果不需要值,则为null) ③ 表单与富文本 *** 要想将富文本中的值传递给表单,则可在表单内创建一个隐藏的表单字段,将富文本的值赋给该表单字段的值

    2.4K20

    HTML 表单和约束验证的完整指南

    即使在今天,开发人员仍花费大量时间编写函数来检查字段值。这在现代浏览器中仍然必要吗?可能不是。在大多数情况下,这实际上取决于您要尝试做什么。...IE 用户不会获得日期选择器,但仍可以按YYYY-MM-DD格式输入日期。如果您的客户坚持,则仅在 IE 中加载 polyfill。没有必要给现代浏览器增加负担。 3....例如,在下面的代码中,每个无效字段都有一个红色边框: :invalid { border-color: #900; } 用户在与表单交互之前会遇到一组令人生畏的红色框。...Mozilla 文档解释说: invalid每个无效字段也会触发一个事件。这不会冒泡:必须将处理程序添加到使用它的每个控件中。...所有 HTML5 输入字段都可以在 IE 中使用,但可能需要更多的用户努力。(例如,当您输入无效的电子邮件地址时,IE 不会检测到。)

    8.4K40

    H5 和 CSS3 新特性

    ,用于将特殊的效果添加到某些选择器 ::before {} /* 选择器在被选元素的前面插入内容和定义css,使用 content 属性来指定要插入的内容。...*/ ::after {} /* 选择器在被选元素的后面插入内容和定义css,使用 content 属性来指定要插入的内容。...属性 描述 text-shadow 向文本添加阴影 text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法 text-emphasis 向元素的文本应用重点标记以及重点标记的前景色...text-outline 规定文本的轮廓 text-overflow 规定当文本溢出包含元素时发生的事情 text-wrap 规定文本的换行规则 word-break 规定非中日韩文本的换行规则 word-wrap...允许对长的不可分割的单词进行分割并换行到下一行 text-decoration 文本修饰符:overline、line-through、underline 分别是上划线、中划线、下划线 @font-face

    2.4K10

    你以为你真的了解MySQL中的数据类型吗?这里保证有你不会的!

    financial_value字段使用DECIMAL(10,2)类型,用于存储财务数据,总共10位数字,其中2位是小数。 INSERT INTO语句用于向products表格中插入三条示例数据。...INSERT INTO语句用于向float_test表格中插入三条浮点数数据。...INSERT INTO语句用于向events表格中插入三条示例数据。 SELECT * FROM events;语句用于查询并显示events表格中的所有数据。...INSERT INTO语句用于向users表格中插入三条示例数据。 SELECT * FROM users;语句用于查询并显示users表格中的所有数据。...data字段使用BINARY(16)类型,表示二进制数据,固定长度为16字节。 INSERT INTO语句用于向binary_data表格中插入三条示例数据。

    13010

    造一个 copy-to-clipboard 轮子

    这里的问题是,在某些环境下文本输入框会存在一些怪异的行为,比如: 如果不是文本输入标签,需要主动创建一个可输入文本的标签(input和textarea)然后将待复制的文本赋值给这个标签,再调用.select...关于 Selection 表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素;而 Range 表示一个包含节点与文本节点的一部分的文档片段。...然而 addRange 并不会添加新 Range 到 Selection 中!...Selection.addRange() 总结一下复制不成功的问题: 当鼠标无意地点击到页面时(比如按钮),Selection 会加入一个看不见的 Range(变成光标的位置,而不是一个选中的区域了) 在我们代码中...目前查了文档,有以下兼容问题: 在 IE 11 下,format 这里只有 Text 和 Url 两种 在 IE 下,copy 事件中 e.clipboardData 为 undefined,但是会有

    91430

    富文本编辑器开发简介

    前言 富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。 方式 iframe 页面中嵌入一个包含空HTML页面的iframe。...():将选区折叠到终点位置 collapseToStart():将选区折叠到起点位置 containsNode(node):确定指定的节点是否包含在选区中 deleteFromDocument():从文档中删除选区中的文本...toString():返回选区所包含的文本内容 * IE8-浏览器不支持,我试了IE8以上也不支持 selection对象 术语 anchor:选中区域的“起点”。...anchorOffset:“起点”在anchorNode中的偏移量。 focusNode:返回包含“结束点”的节点。 focusOffset:“结束点”在focusNode中的偏移量。...表单提交 富文本编辑不是使用表单控件实现的,而需要手工来提取并提交HTML。为此,通常可以添加一个隐藏的表单字段,就是在提交表单之前提取出HTML,并将其插入到隐藏的字段中。

    4.3K20

    DOM

    方法 说明 appendChild(newDom) 向childNode列表的末尾添加一个节点 inserBefore(newDom, 参照节点) 新插入的节点作为参照节点的同胞节点,同时返回该插入节点...replaceChild(newDom, 被替换的节点) 新插入的节点将占据被替换节点的位置 removeChild(要移除的节点) 返回被移除的节点,被移除的节点仍然为稳当所有,只是在文档中没有了位置...动态脚本 在元素添加到页面之前,是不会下载外部文件的。...>元素 deleteTHead() 删除元素 deleteTFoot() 删除元素 insertRow(pos) 向rows集合中的指定位置 插入一行 deleteRow(pos...(pos) 向cells集合中的指定位置插入一个单元格,返回新单元格引用 deleteCell(pos) 删除指定位置的单元格 总结:NodeList、NameNodeMap和HTMLColletction

    1.5K21

    为什么大家都用i标签用作小图标?

    插入内容的特点 正如前面提及的,插入的内容在页面的源码里是不可见的,只能在css里可见。 同时,插入的元素在默认情况下是内联元素(或者,在html5中,在文本语义的类别里)。...这会是对如何设计伪元素的一个简要的说明,看我下面文本编辑器的这幅图 在这个例子中,我高亮的样式将被应用到元素里插入到目标元素内容的前面和后面。 还要注意的是典型的CSS继承规则适用于插入的元素。...在css中,这段内容被设置了宽度,以及一些padding和可见的边框 然后我们有了伪元素。在这个例子中,它是一个散列符号插入到该段内容之前。...插入非文本内容 我简要的提醒,你可以把属性的值置为空字符串或是插入文本内容。...所以,如果你的支持者具有较高的IE版本,你仍然可以在某种程度上使用它们。 一些提醒 正如前面提到的,伪元素不会出现在DOM中。这些元素不是真正的元素。因此,它们不是可用的。

    2.8K52

    JavaScript--XML DOM 总结

    None CDATASection 表示文档中的 CDATA 区段(文本不会被解析器解析) None Comment 表示注释。 None Entity 表示实体。...textContent 设置或返回属性的文本内容。 text 返回属性的文本。IE-only value 设置或返回属性的值。...length 返回元素或属性的文本长度 wholeText 以文档中的顺序向此节点返回相邻文本节点的所有文本 Text 对象方法 方法 描述 appendData() 向节点追加数据 deleteData...() 从节点删除数据 insertData() 向节点中插入数据 replaceData() 替换节点中的数据 replaceWholeText() 使用指定文本来替换此节点以及所有相邻的文本节点 splitText...length 可返回此节点的文本的长度 Commentt 对象方法 方法 描述 appendData() 向节点追加数据 deleteData() 从节点删除数据 insertData() 向节点中插入数据

    6010

    CSS3常用选择器

    Element::first-line 概念:根据 "first-line" 伪元素中的样式对 Element 元素的第一行文本进行格式化 说明:"first-line" 伪元素只能用于块级元素...Element::first-letter 概念:用于向文本的首字母设置特殊样式 说明:"first-letter" 伪元素只能用于块级元素 Element::before 概念...:在元素的内容前面插入新内容 说明:常用"content"配合使用 Element::after 概念:在元素的内容后面插入新内容 说明:常用“content”配合使用,多用于清除浮动 清除浮动例子...header::after{ display: block; content: ""; clear: both; } Element::selection 概念:用于设置在浏览器中选中文本后的背景色与前景色...兼容性:::selection在IE家族中,只有IE9+版本支持,在Firefox中需要加上其前缀“-moz”

    83620

    客户端的js js脚本的引入 js的解析过程

    为1996年的技术 ╮(╯▽╰)╭ 当脚本把文件传递给document.write()的时候,该文本会被添加到文档的输入流中,html解析器会在当前位置创建一个文本节点,将文本插入这个文本节点后面。...可以使用document.write()实现将文本插入流中。解析器恢复解析的时候,该文本会正式的成为文档的一部分,但是页面的源码中并不存在该内容。该操作此时是同步的,可以达到遍历和操作文档树的目的。...[endif]--> ie支持条件注释,上方是使用条件注释的,在ie下,将会执行上方的js脚本 通过 @_jscript 可以判断是不是ie,因为该变量在ie中圆圆为true 写法如下,用于ie的 使用条件注释来写...总结 一下 /*@*cc_on @if(@_jscript) // 这里的代码尽管被注释,也会执行在ie中 // ie会执行这段代码,其他浏览器不会执行...alert('ie') @else*/ // 这段代码并没有在js注释中,但仍然在ie条件注释中。

    13.1K80
    领券