js给dom元素添加伪类

2024-11-02

动态修改 dom 元素的伪类样式

最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / clss::after 等),因为不是 dom 元素,所以不能直接通过 js 修改其属性,虽然可以通过切换 dom 元素的 css 样式名进行修改,但是这样就比较复杂了. 参考了一个帖子然后进行了一些修改,大概思路如下: 这里使用 windows 8 的工程,js 代码直接写在 defa

button不能添加伪类元素

今日试了一下button添加伪类元素,结果是不行的前后都叠加在一起 html代码: <button class="form_btn" formType="submit">开始择日</button> css样式: .form_btn::before{ content: ""; position: absolute; top:0; background:yellow; width:14px; height: 38px; bac

JS1 js获取dom元素方法

js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其中,domId为要选取元素的id属性值 2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的元素. 2.通过名称name选取元素(getElementsByName) 1)使用方法:document.getEle

向第一个 p 元素添加一个类

This is a heading This is a paragraph. This is another paragraph. 向第一个 p 元素添加一个类 111 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript">

CSS伪元素与伪类的区别

伪类和伪元素介绍伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类. :first-child :link: :visitive :hover :active :focus :lang 伪元素:与伪类针对特殊状态的元素不同的是,伪元

js进阶 10-7 简单的伪类选择器可以干什么

js进阶 10-7 简单的伪类选择器可以干什么一.总结一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索引相关(奇偶,开始最后,大于小于等于) 除某元素以外,某元素的第一个,最后一个,以及某元素所有和索引相关的操作 3.伪类选择器的关键性符号是什么? 冒号,以英文冒号“:”开头 4.如何选取某一个元素中的其他元素? 用后代选择器 $('ul :not(#one)').css('color','blue

JS获取DOM元素的八种方法

JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 获取html的方法(document.documentElement) 获取body的方法(document.body) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 1.通过ID获

js之DOM元素遍历

对于元素间的空格,IE9之前的版本不会返回文本节点,而且他所有浏览器都会返回文本节点.这样就导致使用childNodes和firstChild等属性时的行为不一致.从而有了Element Traversal API 为DOM元素添加额以下5个元素: chaildElementCount:返回子元素(不包括文本节点和注释)的个数 firstElementChild:指向第一个子元素 lastElementChild:指向最后一个子元素 previousElementSilbing:指向前一个同辈

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

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

css 选择器 & UI元素的伪类选择器 & 伪元素选择器

UI元素的伪类选择器 1. :focus 用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable 用来指定元素处于不可用时的状态表单里应用较多 4. read-only 用来获取元素属于只读状态时 5. read-write 用来匹配可读和可写的元素 input search 6. :checked 用来获取单选框处于选取状态时的样式 7. :default 选取用来选取,打开时默认选取状态时单选框 8. :indeter

HTML&CSS基础-子元素的伪类选择器

Js为Dom元素绑定事件须知

为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { alert('I was clicked!'); }); 上面的绑定是无效的,因为异步加载需要时间,而在获取元素之前,早已执行了$('a').click();方法,所以绑定失败. 正确的做法是,等待元素加载完后再执行 $('a').click(); $('body').load('LearnClickBi

CSS的伪元素和伪类

css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类—— :hover, :active, :visited, :focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容(可以是文字,图标等,下图就是一个正方形图标,图标是通过css绘制的). 这些添加不会出现在DOM中,不会改变文档内容,不可复

用JQuery动态为选中元素添加/删除类

在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id="med_specialist_1" name="med-specialist" class="med-active">专家门诊1</a> <a id="med_specialist_2" name="m

CSS——伪元素与伪类

伪类与伪元素伪类:在特殊性中占据0,0,1,0 :link 向未访问的链接添加特殊的样式.也就是说,链接所指的 URI 尚未出现在用户代理的历史中.这种状态与 :visited状态是互斥的. :visited 对已访问的链接添加样式. :hover 对鼠标悬停时的链接应用样式 :foucs 对鼠标聚焦的链接应用样式 :active 向激活(在鼠标点击与释放之间发生的事件)的元素添加特殊的样式. 对于上述伪类,要遵循顺序书写!! :nth-child(n) 从父元素匹配索引为n的子元素,设置样式

JS操作DOM元素属性和方法

Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.JavaScript则是用于访问和处理DOM的语言.如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念.文档中的每个元素都是DOM的一部分,这就使得JavaScript可以访问元素的属性和方法. DOM独立于具体的编程语言,通常通过JavaScript访问DOM

CSS和CSS3中的伪元素和伪类（总结）

好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang :active :focus :hover :link :visited CSS中伪元素包括: :first-letter :first-line :before :after CSS3中明确规定伪元素用::表示,伪类用:表示,因此, CSS3中的伪类有动态伪类 :active :focus :h

详解JS中DOM 元素的 attribute 和 property 属性

一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 html 标签拥有的属性: property 是 dom 元素在 js 中作为对象拥有的属性. 从定义上可以看出: 对于 html 的标准属性来说,attribute 和 property 是同步的,是会自动更新的但是对于自定义的属性来说,他们是不同步的.(自定义属性不会自动添加到property)

CSS 基础例子伪元素和伪类 & 区别

一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素 -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到效果伪类种类伪元素种类二.基本例子伪类: p>i:first-child {color;red} p下边的第一个子元素的颜色为红色 <p> <i>first</i> <i>second</i></p> 要达到同等效果,可以这

css3--伪元素和伪类

1,定义 W3C定义:伪元素伪类都可以向某些选择器设置特殊效果.(css2中定义) css3中的定义: 1).伪元素:在DOM树中创建了一些抽象元素(虚拟的容器).由两个冒号::开头(css2中并没有区别),为了兼容性一般还是写一个冒号:. 2).伪类: 为了选择器找到那些不存在于DOM树中的信息及不能被常规css选择器获取到的信息 3).css3新增的伪类 2,总结 1).伪类本质上为了弥补常规选择器的不足,以便获得更多信息:伪元素本质上是创建了一个有内容的虚拟容器. 2).css

js给dom元素添加伪类

热门专题