CSS自定义属性expression_r
CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色、大小、距离等静态样式有效,对于要实现某些html元素的动态样式就显得有些力不从心。有了CSS的自定义属性expression_r,可以自己定义属性,自己在属性里写需要的代码,这样就可以结合CSS的特性与JS特效,实现对整体页面上相同元素的控制。是不是觉得有点不可思议?我们先拿新手们经常问的怎么消除页面上的链接虚线框为例。
通常的做法是:
link1
link2
link3
粗看或许还体现不出采用expression_r的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,何况两者一比较,哪个产生的冗余代码更多呢?采用expression_r的做法如下:
<style type="text/css">
a {star : expression_r(onfocus=this.blur)}
</style>
link1
link2
link3
说明:里面的star就是自己任意定义的属性,你可以随自己喜好另外定义,接着包含在expression_r()里的语句就是JS脚本,在自定义属性与expression_r之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非script内。OK,这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意,如果触发的特效是CSS的属性变化,那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改,你可能想当然的会认为应该写为
<style type="text/css">
input {star : expression_r(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<input type="text">
<input type="text">
<input type="text">
可结果却是出现脚本出错,正确的写法应该把CSS样式的定义写进函数内,如下所示: <style type="text/css">
input {star : expression_r(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
</style>
<input type="text">
<input type="text">
<input type="text">
看了这么多,感觉怎么样,是不是有点概念了呢。使用CSS的自定义属性很简洁地用较少的代码实现了用JS产生的相同的效果,真正起到了事半功倍的作用,你还不赶快去试试?
CSS自定义属性expression_r的更多相关文章
- css自定义属性(css变量)
感谢原文作者:Kuku殿下 原文链接:https://segmentfault.com/a/1190000015948538 前言 刚开始的"css变量",经扩展之后,称为&quo ...
- CSS自定义属性与前端页面的主题切换
基于级联变量的CSS自定义属性,已经出来很多年了. 虽然有less.sass等预处理器大行其道,但是自定义属性也有它的特点和用处,诸如在js中读写.作用域设置等等,在处理UI主题切换等功能上也发挥着很 ...
- CSS自定义属性 —— 别说你懂CSS相对单位
前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...
- 【CSS】333- 使用CSS自定义属性做一个前端加载骨架
点击上方"前端自习课"关注,学习起来~ 我们在打开APP或者网站的时候,经常可以看到这样的效果,在内容加载完成之前,会有一个骨架动画的出现,这种加载方式比传统的进度条方式要友好的多 ...
- CSS Variables:css自定义属性的使用
CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命.之前使用变量的时候,需要借助sass.less等预处理工具来实现,现在我们可以直接使用css来声明变量. 一.兼容性 ...
- css自定义属性和简单效果
简介 CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命. 之前使用变量的时候,需要借助sass.less等预处理工具来实现,现在我们可以直接使用css来声明变量. 兼容 ...
- CSS变量(自定义属性)实践指南
本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...
- css样式中position和_position的区别
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3IAAAEUCAIAAADhh5PYAAAgAElEQVR4nO3dPa/rNoLGcX6dW6UL+B ...
- 引人瞩目的 CSS 变量(CSS Variable)
这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...
随机推荐
- 关于connect by rownum与connect by leve
http://www.itpub.net/forum.php?mod=viewthread&tid=1570306 http://www.itpub.net/forum.php?mod=vie ...
- php面试中的经典问题
原文:https://blog.csdn.net/ghostlv/article/details/51284745 问题一问题描述考虑下面代码: $str1 = 'yabadabadoo';$str2 ...
- Python 在 Windows 下安装第三方包,报 Python 未注册的问题解决
保存一些代码为 reg.py,运行之即可. #/usr/bin/env python # -*- coding: utf-8 -*- import sys from _winreg import * ...
- Ubuntu16.04环境安装jenkins
前提:系统必须安装jdk 如果没有安装可通过如下命令安装: sudo add-apt-repository ppa:openjdk-r/ppa sudo apt update sudo apt ins ...
- AT987 高橋君
AT987 高橋君 给出 \(n,\ k\) ,求 \(\displaystyle\sum_{i=0}^kC_n^k\) , \(T\) 次询问 \(T\leq10^5,\ 0\leq k\leq n ...
- Egg入门学习(二)---理解service作用
在上一篇文章 Egg入门学习一 中,我们简单的了解了Egg是什么东西,且能做什么,这篇文章我们首先来看看官网对Egg的整个框架的约定如下,及约定对应的目录是做什么的,来有个简单的理解,注意:我也是按照 ...
- 编程&学习总结格式
编程&学习总结格式 一.本周完成的作业: 题目1.A乘以B 题目内容描述:看我没骗你吧 -- 这是一道你可以在10秒内完成的题:给定两个绝对值不超过100的整数A和B,输出A乘以B的值. 1) ...
- Ajax跨越问题原因分析与解决思路
1.什么是AJAX跨域问题 简单来说,就是前端调用后端服务接口时 如果服务接口不是同一个域,就会产生跨域问题 2.AJAX跨域场景 前后端分离.服务化的开发模式 前后端开发独立,前端需要大量调用后端接 ...
- flink1.7 checkpoint源码分析
初始化state类 //org.apache.flink.streaming.runtime.tasks.StreamTask#initializeState initializeState(); p ...
- 小P的秘籍
题目描述 小P马上就要来到程序设计大赛的现场.上了,他希望能够AK这次比赛,所以他找到了一个字符串. 这个字符串长度为n,由A和K组成.这个字符串被小p称为AK串.小P任意截取一个区间s,使得这个区间 ...