如何动态修改网页元素的属性？

原创于 2021-04-14 14:17:01 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #html #javascript #css

前端专栏收录该内容

11 篇文章

订阅专栏

本文讲述了作者在使用uniapp框架时遇到的一个问题，即通过JavaScript尝试动态修改网页元素的灰度值，起初使用`document.getElementById`方法在HBuilder内置浏览器中正常工作，但在实际手机上运行时出现错误。经过探索，作者找到了新的解决方案，通过在HTML中使用`@click`和`:style`结合数据绑定，成功实现了动态修改元素属性的目标，避免了跨平台兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近遇到一个需求，需要动态修改网页某个元素的属性，具体来说就是灰度值。我用的是uniapp这个框架，一开始我使用百度搜“js 控制style里的数值大小”，然后找到下面这样的解决方案：

document.getElementById("resume").style.filter="grayscale(100%)"

但奇怪的是，这个方案在hbuilder的内置浏览器里运行的好好的，一旦运行在真实的手机上，就会报错，错误如下：

Cannot read property 'getElementById' of undefined

由于本人功力尚浅，不知道这到底是怎么一回事，问过度娘也没找到想要的答案。于是只能把上面的解决方案废弃，寻找其他的方案。

最后皇天不负有心人，还是被我找到了。代码如下：

<view id="diploma" class="f-header m-t" @click="showDiploma" :style="{filter: diplomaGray}">

...

diplomaGray: 'grayscale(100%)'

这样在js代码里只需要修改变量diplomaGray的值就能达到修改对应网页元素的属性的目的了。

（全文完）