data-属性动态修改伪类的背景颜色

2024-09-04

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

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

CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属性选择器.伪类选择器.过滤选择器,减少了对HTML类名或ID名的依赖,避免了对HTML结构的干扰,使编写代码更加简单轻松. 根据所获取页面中元素的不同,可以把CSS3选择器分为5大类:基本选择器.组合选择器.伪类选择器.伪元素和属性选择器.其中,伪类选择器又分为6种:动态伪类选择器.目标伪类选择器.

android:修改PagerTabStrip中的背景颜色，标题字体的样式、颜色和图标以及指示条的颜色

1.修改PagerTabStrip中的背景颜色我们在布局中直接设置background属性即可: <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="fill_parent" android:layout_height="fill_parent" > <android.support.v4.view.PagerTabS

周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重点是随机撒花,下面会附上随机撒花的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"

CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

CSS 3 现状兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 | 表示多选一 ? 表示 0个或1个 * 表示 0个或多个 {}表示范围 {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限 # 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:<length>#{1,4}. !代表

CSS基础--属性选择器、伪类选择器

属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .red{ color: red; } .blue{ color: blue; } .darkred{ color: darkred; } .blueviolet{ color:bluevi

从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动

大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.链接伪类 a:link{属性:值;} /*链接默认状态 ( a{属性:值}效果是一样的.)*/ a:visited{属性:值;} /*链接访问之后的状态*/ a:hover{属性:值;} /*鼠标放到链接上显示

清除系统默认样式，文本样式,高级选择器(权重),边界圆角，a标签的四大伪类，背景图片

清除系统默认样式大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; padding:; list-style:none; #清除列表样式 } a { text-decoration:none; #清除a标签下划线 color:black; # 设置a标签字体颜色 } 文本样式简写: font: 字重字体大小/行高字族

实用CSS3属性之 :target伪类实现Tab切换效果

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支持: 不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox.Chrome.等这些浏览器都支持. 用法: :target伪类与:hover.:link.:visited.:focus等伪类的用法一样 :target {color:blue} 实例:CSS3 :tar

HTML5--(2)属性选择器+结构性伪类+伪类

一.属性选择器 [att] 匹配所有具有att属性的 [att=val] 匹配所有att属性等于“val”的 [att~=val] 匹配所有att属性包含“val”或者等于“val”的(val必须是一个完整词) [att|=val] 匹配所有att属性仅仅只等于以val-’ 开头的或等于“val”(比如说zh-cn) [att*=val] 匹配所有att属性包含’val’的字母 (val可以是字母) 类似模糊查询 [att^=val] 匹配所有att属性 ‘val’开头的 (val可以是字母)

第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

一.属性选择器其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: div[class=mydemo] 3.E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置: div[class*=mydemo] 4.E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置: div[class^=mydemo] 5

python 之前端开发（基本选择器、组合选择器、交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器）

11.3 css 11.31 基本选择器 11.311 id选择器根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 {color: red;} 引用id一定要加# #p2

动态修改Python类和实例的方法（转）

相信很多朋友在编程的时候都会想修改一下已经写好的程序行为代码,而最常见的方式就是通过子类来重写父类的一些不满足需求的方法.比如说下面这个例子. class Dog: def bark(self): print 'Woof!' class Husky(Dog): def bark(self) print 'Howl!' 我们可以用上述方式来修改我们自己写的代码,但是我们应该怎么修改第三方代码呢?当然,我们也可以自己编写一个子类,调用子类的实例对象来实现修改,但是这样可能会引入其他一系列问题.所以我

CSS3属性之 target伪类实现Tab切换效果

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target伪类实现Tab切换效果</title> <style type="text/css"> p{ bond:li; } .tablis

修改form 的字段背景颜色及字体颜色

1.通过个性化实现 2. 修改form 代码有一张工资单,当某个员工的工资超过5000时,用户需要系统能用红色来指示员工的姓名和工资. 实现方法: 我们新做一张form,按常规建好block和item并建一个visual attributes v1(background color=red(背景颜色是红色)foreground color=red(字体颜色是红色)).在相应的block level上新建一个post-query trigger并编写代码如下: --如果工资(block.item

MFC修改视图CView的背景颜色

(1) 在CYournameView(就是你的视图类,以下以CDrawLineView为例)添加了一个背景颜色变量 COLORREF m_bgcolor; (2)修改这个函数: BOOL CDrawLineView::PreCreateWindow(CREATESTRUCT& cs){// TODO: Modify the Window class or styles here by modifying// the CREATESTRUCT cs cs.lpszClass=AfxRegis

修改static控件背景颜色和文字颜色

当 static 控件或具有 ES_READONLY 风格的 edit 控件被绘制时,会向父窗口发送 WM_CTLCOLORSTATIC 消息.如果我们在窗口过程中处理该消息,就必须返回一个画刷句柄,Windows 会使用该画刷来绘制控件背景(子窗口背景). 也就是说,改变 static 控件的背景颜色只有这一种方式,就是处理 WM_CTLCOLORSTATIC 消息.WM_CTLCOLORSTATIC 消息就是用来设置背景画刷的. 改变 static 控件的背景颜色: LRESULT CALL

Vue修改单个组件的背景颜色

组件默认背景颜色为白色,但工作需要改成黑色,于是研究了一番. 很简单,只需在组件中使用两个钩子函数beforeCreate (),beforeDestroy () 代码如下: beforeCreate () { document.querySelector('body').setAttribute('style', 'background:#000000') }, beforeDestroy () { document.querySelector('body').removeAttribute(

Ext.data.Store动态修改url

store.proxy = new Ext.data.HttpProxy({url:path}); 示例: var ad_store = new Ext.data.JsonStore({ fields: ["id", "title1", "title2", "content", "pid", "position", "publish_time", "end_

动态更换view类的背景---StateListDrawable的应用

StateListDrawable可以根据View的不同状态,更换不同的背景可以应用如EditText,Button等中,以Button为例系统中默认的按钮被按下的颜色和未点击时的颜色不一样,该种实现可以用Java代码和XML实现以下是Java代码: //……前面对Button的声明略去 okBtn.setBackgroundDrawable(addStateDrawable(this, R.drawable.btn_normal, R.drawable.btn_selected, R.d

动态更换view类的背景－－－－StateListDrawable的应用

StateListDrawable可以根据View的不同状态,更换不同的背景可以应用如EditText,Button等中,以Button为例系统中默认的按钮被按下的颜色和未点击时的颜色不一样,该种实现可以用Java代码和XML实现以Java代码: //……前面对Button的声明略去 okBtn.setBackgroundDrawable(addStateDrawable(this, R.drawable.btn_normal, R.drawable.btn_selected, R.dra

data-属性动态修改伪类的背景颜色

热门专题