获取样式-----------追加样式----------移除样式

本文探讨了如何使用JavaScript动态更改网页元素样式,并通过jQuery简化实现过程。介绍了如何为HTML元素添加、删除或修改CSS类,以实现交互式用户体验。

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







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p{margin:0;padding:0;}
body{font-size:12px;}
.myclass{font-weight:bold;}    
.add{text-decoration:underline;color:#F00;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //更改样式
            //$("p").attr("class","fruit");//这只P元素的class为fruit
            
        //追加样式
        //$("p").addClass("add")//-----------给p属性追加一个样式(add);在给p追加样式之前,先把样式在样式表中写出来
         })
</script>
</head>

<body>
    <p class="myclass" title="你最喜欢的是">你最喜欢的是</p>
</body>
</html>


### el-upload 组件上传文件后的回显样式设置 当使用 `el-upload` 组件完成文件上传之后,可以通过配置项来控制已上传文件的显示效果以及交互行为。为了实现良好的用户体验,在文件成功上传后通常会展示缩略图或其他形式的预览。 #### 配置列表型展示并自定义模板 通过设定属性 `list-type="picture-card"` 可让组件以卡片的形式展现图片,并允许进一步定制化内部结构: ```html <template> <div> <!-- 使用 picture-card 列表类型 --> <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload> <!-- 对话框用于查看大图 --> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </div> </template> <script> export default { data() { return { dialogImageUrl: '', dialogVisible: false, }; }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; } } }; </script> ``` 上述代码片段展示了如何利用 `el-upload` 的内置事件处理函数来自定义点击和移除操作的行为[^2]。 对于非图像类型的文件,则可以考虑采用其他方式呈现信息,比如直接列出文件名加上图标表示其类别;也可以借助第三方库生成相应的预览视图。 #### 动态更新文件列表状态 除了静态地指定初始状态下要显示哪些项目外,还可以根据实际业务逻辑动态调整 `fileList` 属性所指向的数据集合。每当有新的条目加入或是旧有的被删除时都应及时同步至该变量内以便界面能够及时反映出最新的变化情况。 ```javascript // 假设这是从服务器获取到的一组已经存在的资源链接 const existingFiles = [ { name: 'example.png', url: '/path/to/example.png' }, ]; this.fileList = [...existingFiles]; ``` 此段脚本说明了怎样初始化已有数据源作为默认加载的内容[^3]。 另外值得注意的是,如果希望达到“所见即所得”的即时反馈机制,应当确保每次选取本地文件后立即将其基本信息追加进当前维护着的状态数组里头去——即使此时还未真正提交给远程服务端保存起来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值