用户要求编辑数量框,只能点击+-来设置数量,鼠标放到数量上,禁用用键盘输入。

通过JS插入属性和值

JS代码:


//给CSS是.qty 添加一个属性onkeydown='return false',禁用数量input编辑

<script>
const qty = document.getElementsByClassName('qty')[0];
qty.setAttribute('onkeydown', 'return false');
</script>

CSS代码

 /*数量input*/ 
.woocommerce .quantity .qty{cursor: default;color: transparent;text-shadow: 0px 0px black;} 

 

句法

setAttribute函数具有以下语法: Element.setAttribute(name, value) 此调用的参数是:

name –字符串– 要添加的属性的名称(即现有属性的名称)。

value –字符串– 属性的值(注意:每个属性都有一组必须遵守的有效值)。

一旦有了要使用的单个 HTML 元素,就可以使用以下函数来操作该元素的属性:

修改 属性,请使用setAttribute(name, value)

获取 属性的当前值,请使用getAttribute(name, value)

删除 属性,请调用removeAttribute(name, value)

其它用法

用setAttribute修改Input 的placeholder 值

Html

<input type="text" placeholder="Enter text">

JavaScript

const userInput = document.querySelector('input');
userInput.setAttribute('placeholder', 'Welcome!');

用setAttribute 修改 Image的src

Html

<img src="/imgs/add.png" id='img1'>

JavaScript

const img1 = document.getElementById('img1');
img1.setAttribute('src', '/imgs/2-arrows.png');