修改html中button显示的文字

本文介绍了两种前端交互技巧:一是通过修改密码框类型实现显示与隐藏的功能;二是利用按钮控制视频播放和暂停。此外还对比了innerHTML、innerText、outerHTML、outerText等属性的区别。

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

1. <input type="button">  实现密码输入框的可见和隐藏

直接修改value属性即可

<script type="text/javascript">
function getPasswd(){
    var passwd = document.getElementById("pwdID");
    var pwdBtn = document.getElementById("pwdBtnID");
    if(passwd.type=="password")    {
        passwd.type="text";
        pwdBtn.value="隐藏";
    }
    else{
        passwd.type="password";
        pwdBtn.value="显示";
    }
}
</script>

密码:<input id="pwdID" type="password">
<input id="pwdBtnID" type="button" onclick="getPasswd()" value="显示">

2. <button> 实现视频的播放和暂停

修改button的innerHTML

<script type="text/javascript">
function playVideo(){
    var videoDiv = document.getElementById("videoId");
    var videoBtn = document.getElementById("videoBtn");
    if(videoDiv.paused){
        videoDiv.play();
        videoBtn.innerHTML = "暂停";        
    }
    else{
        videoDiv.pause();
        videoBtn.innerHTML="播放";
    }
}
</script>

<button id="videoBtn" type="button" onclick="playVideo()">播放</button>

 3. innerHTML、innerText、outerHTML、outerText

innerHTML是符合W3C标准的属性,其它属性不推荐使用

下面是id=innerId的div几个值的对应结果

转载于:https://www.cnblogs.com/coolqiyu/p/7152786.html

<think>好的,用户现在问的是如何在uView的Button组件中更改文字颜色。之前他问过如何在按钮右侧加图标,现在这个问题看起来是关于样式的调整。我需要先回顾一下uView的文档,确保给出的方法准确。 首先,用户可能已经知道通过插槽或自定义样式来添加图标,现在想进一步调整文字颜色。通常,组件库会提供属性来直接设置颜色,比如color属性。uView的Button组件是否有这样的属性呢?我记得是的,可能有一个text-color或者类似的属性。 接下来,我需要检查是否有多个方法可以实现这一点。比如,直接使用组件提供的props,或者通过CSS类覆盖。有时候用户可能想用内联样式,但推荐使用组件提供的属性更稳妥,因为这样不会影响其他样式或响应式设计。 还需要考虑不同版本的可能差异。比如,用户如果使用的是旧版本uView,某些属性是否存在。比如text-color在哪个版本引入的?不过通常这类基础属性应该一直存在。不过为了保险,可以提到两种方法:使用props和CSS覆盖。 另外,用户可能有不同的场景,比如普通按钮、空心按钮(plain为true时),这时候文字颜色的设置可能有不同。需要指出在plain模式下,color属性可能指的是边框颜色,而text-color才是文字颜色,这时候要同时设置color和text-color吗?需要查证一下文档。 还要注意,用户可能遇到的常见问题,比如设置color属性不生效,可能是因为优先级问题,或者需要加上!important。这时候需要提醒用户检查样式优先级,或者使用自定义类来覆盖。 最后,可能需要给出示例代码,展示如何通过props和CSS两种方式修改文字颜色,并说明各自的适用场景。同时,注意事项比如plain模式下的颜色设置,以及如何避免样式冲突等。</think>在uView中修改Button组件的文字颜色可以通过以下方式实现: 1. **通过`text-color`属性直接设置**(推荐方式) ```html <u-button text-color="#ff0000">红色文字按钮</u-button> ``` 2. **通过CSS样式覆盖**(需要更高优先级) ```html <u-button class="custom-btn">自定义颜色按钮</u-button> <style> /* 使用深度选择器 */ ::v-deep .custom-btn .u-btn__text { color: #00ff00 !important; } </style> ``` **注意事项**: 1. 当按钮处于`plain`空心模式时: ```html <u-button plain color="#3366ff" <!-- 控制边框颜色 --> text-color="#3366ff" <!-- 控制文字颜色 --> >空心按钮</u-button> ``` 2. 颜色值推荐使用: - 十六进制格式 `#RRGGBB` - RGB格式 `rgb(255,0,0)` - 颜色名称(如red/blue等) 3. 常见问题: - 如果颜色不生效,检查是否有更高优先级的样式覆盖 - 禁用状态会自动应用灰色,无需单独设置 - 加载状态文字颜色会自动适配按钮主题色 **版本适配**: - `text-color`属性在uView 1.x和2.x版本均支持 - 深度选择器语法在Vue2/Vue3中写法不同(示例为Vue3写法)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值