webkit中使用js给html元素style设置filter属性，再获取filter时为undefined

最新推荐文章于 2026-06-23 00:08:34 发布
最新推荐文章于 2026-06-23 00:08:34 发布 · 582 阅读 · 0
标签
#webkit #HTML #Chrome #IE #Safari
本文探讨了不同浏览器对HTML元素样式属性的支持情况，特别是针对IE6/7/8及Safari/Chrome等浏览器中对自定义样式属性的处理差异进行了详细说明。

以下为重现该bug的代码，

 

<!DOCTYPE HTML>
<HTML>
 <HEAD>
 </HEAD>
 <BODY>

  <div id="a">HELLO</div>

  <script>
	var obj = document.getElementById('a');
	obj.style.filter = "Alpha(opacity='20')";
	alert(typeof obj.style.filter);
  </script>

 </BODY>
</HTML>

 

 

IE6/7/8/Firefox/Opera都弹出了string，

Safari/Chrome弹出的这是undefined

 

 

改成非filter，自定义的属性如aa，则不会重现，如

 

  <script>
	var obj = document.getElementById('a');
	obj.style.aa= "Alpha(opacity='20')";
	alert(typeof obj.style.aa);
  </script>

 

 

 

前端利用js里数组的filter方法进行多条件过滤查询
qq_37635012的博客
03-20 3373
这个页面，获取表格数据是用了混入里的方法getTableData(pager, queryParams)，分别传入页码和参数等，这里watch里立即监听了表格数据的变化，并对表格数据顺序前端做了处理，满足a.id == this.rowFormGet.docId的行排在最前面，对el-table自定义排序方法可以参考我之前发的文章。需求：用户在输入框输入多个条件时，可以对表格数据进行过滤查询，无需后端接口处理，利用了前端js里数组的filter方法进行过滤。
关于style.filter失效的可能情况之一
恋一个人，爱一座城
10-08 1293
这两年所做的网站中，在轮显js上一直使用的自己2010年封装的，以面向对像调用的那个shw.js， 以前的贴　http://bbs.blueidea.com/thread-3050318-1-1.html 这两年来偶尔会遇到一个奇怪的问题，就是在ie8下半透明的轮显渐变效果失效，可能仅限于本地调试和localhost， 在互联网上又没事，google和ff 等全部正常，一模一样的代码，前前后
如何利用 HTML 的＜style＞标签中的filter属性为页面元素添加特效，如模糊、灰度、饱和度调整等，并且通过 JavaScript 动态控制特效的强度？
前端大白话
05-05 1103
filter属性是给页面元素添加特效的“神器”，有很多种值可以实现不同效果，还能组合使用。JavaScript通过获取元素和监听事件，来动态修改filter属性值，实现特效强度的控制。在面试中，回答这类问题要抓住获取元素、设置初始特效、添加事件监听器、动态修改属性这几个关键步骤，用大白话讲清楚原理和过程。
html为什么给元素配置属性,webkit中应用js给html元素style设置filter属性，再获取filter时为undefined...
weixin_39969340的博客
06-04 342
webkit中使用js给html元素style设置filter属性，再获取filter时为undefined以下为重现该bug的代码，HELLOvar obj = document.getElementById('a');obj.style.filter = "Alpha(opacity='20')";alert(typeof obj.style.filter);IE6/7/8/Firefox/O...
JS设置样式的两种方式
zuo_zuo_blog的博客
04-07 1803
a) ClassName/style------DOM的style属性只能获取标签中使用style设置的样式，无法获取潜入或者外部样式，style.cssText获取style里面的字符串（只能在行内式获取） b) 样式少的时候使用 c) Style是对象类型 d) 值是字符串，没有设置值是“” e) 命名以驼峰命名 f) 改变透明度div.style.opacity=“0.2”; div.sty...
手写原生JavaScript Tab组件：轻量、无障碍、零依赖
weixin_30329623的博客
06-20 346
Tab组件是Web界面中基础但关键的导航模式，其本质是通过DOM状态管理实现标签页间的视图切换与焦点控制。理解其底层原理需掌握事件委托、CSS Flexbox布局、ARIA语义化属性及内存生命周期管理。技术价值在于摆脱框架束缚，实现超轻量（<3KB）、高可控、可无障碍访问的UI模块，适用于嵌入式系统、政务内网、IoT设备等受限环境。典型应用场景包括无构建流程的静态页面集成、遗留系统重构、以及对性能与安全有严苛要求的B端产品。本文聚焦Vanilla JavaScript与flexbox协同实践，直击oncli
JSX本质解析：不是模板，而是React.createElement的语法糖
weixin_33739646的博客
06-21 371
JSX是React中用于描述UI结构的核心语法形式，其本质并非HTML模板或XML，而是一种编译时转换为JavaScript函数调用（React.createElement）的语法糖。这一设计决定了JSX必须遵循JS语法规则：属性名使用驼峰（如className、onClick）、值需为合法JS表达式、条件渲染依赖三元运算符而非指令。理解JSX与React Element对象的映射关系，是掌握React渲染原理、规避常见错误（如key缺失、style字符串误用、if语句滥用）和实现高性能交互组件的基础。本文
JavaScript 数组高阶方法精讲与 TodoList 实战
最新发布
黄裳博客
06-23 9
本文深入解析了React状态管理中数组操作的三大核心方法：map、filter和reduce。文章从函数式编程的基本概念入手，通过名词解释表梳理了16个关键术语，包括高阶函数、纯函数、不可变数据等核心概念。重点剖析了map、filter的底层原理，通过ASCII流程图直观展示执行过程，并提供了手写polyfill实现代码，详细解释了每个关键实现细节。文章强调函数式编程思想在React状态管理中的应用，如声明式编程、不可变数据等原则，为后续构建完整的TodoList应用奠定理论基础。
vue filters过滤器this报undefined的解决方案
过眼云烟—了凡
06-11 1803
在使用 vue filters过滤器的过程中发现直接用this. 获取需要遍历的数据会报undefined错误，打印this发现输出的是undefined, 想到一下解决方案： 1.全局声明一个变量 在这里插入图片描述 2.在生命周期里将this赋值给 that 在这里插入图片描述 filters过滤器中再次打印that 可以输出想要的结果了 ...
vue中过滤器filters的this指向问题,指为undefined
Sapling
12-09 5212
有时候我们在使用vue中的过滤器filters方法时，用到this时会报undefined错，那是因为在filters中的this指向其实是为undefined,如果真的想使用可以全局定义一个that, 进行代替，let that = this; 那是因为当初为了设计过滤器filters更偏重于对文本数据的转化，如果使用上下文中的this,可以使用计算属性computed或者方法methods。 ...
前端学习案例16-数组方法filter&undefined和null对比2
qq_41632427的博客
12-31 125
前端
JS filter()方法 介绍和使用
热门推荐
weixin_39501680的博客
12-20 12万+
filter方法是js中常用的方法； 一，作用； filter用于对数组进行过滤。 它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意：filter()不会对空数组进行检测、不会改变原始数组 二，语法； Array.filter(function(currentValue, indedx, arr), thisValue) 其中，函数 function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为 true，则该元素被保留；   函数的第一个参数 curren
css style filter tuto
我们都是木头人
08-31 4660
语法：STYLE="filter:filtername(fparameter1,　fparameter2...)"　　（Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数）  　　滤镜说明：　　Alpha：设置透明层次　　blur：创建高速度移动效果，即模糊效果　　Chroma：制作专用颜色透明　　DropShadow：创建对象的固定影子　　Fl
H5 调用安卓IOS方法
Mr-k的博客
06-18 4403
1.原生开发中嵌入H5页面。H5调用原生的方法 //IOS //feedbackFinish 是IOS暴露出来的方法名，参数没有则null,不能为空 window.webkit.messageHandlers.feedbackFinish.postMessage(null); 2.H5调用Android的方法 2.1需要安卓与H5定义一个协议，简单来说就是一个入口方法 webVie...
JS如何使用map、filter过滤数组并去除其中undefined的元素
qq_45104588的博客
08-15 1万+
JS如何使用map、filter过滤数组并去除其中undefined的元素
style filter 实现背景自适应大小
二南的程序人生
12-10 815
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/bg.gif, sizingMethod=scale"
vue中动态设置style样式和使用filters过滤器设置样式
达拉崩巴斑得贝迪卜多比鲁翁_
07-15 1704
例如：想给图片增加高度和宽度 <el-image :class="classRotation" v-if="imageData.src !== undefined" :src="imageData.src" :style="imageStyle"> </el-image> //在data中声明 imageStyle data(){ return{ imageData:{}, imageStyle :{}, //样式参数
思考：【滤镜仅在IE有效！】在style使用filter(滤镜)设置水平翻转(flipH)和竖直翻转(flipV)
龐校長PAMPANG
05-12 766
在CSS中，有滤纸属性filter，可以将某一个标签内的内容按水平方向翻转或者按竖直方向翻转。 基本实现如下： 滤镜实现翻转 div{ position: absolute; top: 100px; left: 100px; filter: flipV; } img { position: absolute; top: 120px; left:
html filter 属性,Style
weixin_32734143的博客
06-04 368
Style filter 属性实例修改图片颜色为黑白 (100% 灰度):// Chrome, Safari 和 Opera 浏览器document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";// 标准语法 (其他主流浏览器不支持)document.getElementById("myImg").style.fil...
filter的应用：Opacity篇
llc2007的专栏
05-21 1218
filter的应用：Opacity篇 声明： 对不起，前一篇文章的描述是有问题的。 以下是改正后的文章，希望能登上。 要给人美好的第一印象，特别的网页初始化方式起了一定的作用。 这次就和大家谈谈filter中的Opacity的应用。 filter是元素的特效属性，可以用在页面中的任何可见元素。如BODY，文字，图片，换行线，插件等。 而filter中的Opacity是调节透明度的。 当Opaci
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值