一个woocommerce在线商店，产品都是至少50为一个单位来销售的，原本是设置了step为50，也就是点击一下+，数量就增加50，用户突然有个要求：

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

解决方案就是给主题增加如下代码：

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 –字符串– 属性的值。

可以使用以下函数来操作该元素的属性：

修改 属性，请使用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');