Question

当我将值作为函数的参数时，

像这样

<html>
  <head>
    <style rel="stylesheet">
      .A { border: 1px solid red; background-color: white }
    </style>
    <script>
      function clicked(v) {
        console.log(v);
      }
    </script>
  </head>
  <body>
    <input type="button" class="A" value="1" onclick="clicked(value)">
  </body>
</html>

效果很好。

它显示了v的值。

但是，当我将class作为参数时，

像这样

<html>
  <head>
    <style rel="stylesheet">
      .A { border: 1px solid red; background-color: white }
    </style>
    <script>
      function clicked(c) {
        console.log(c);
      }
    </script>
  </head>
  <body>
    <input type="button" class="A" value="1" onclick="clicked(class)">
  </body>
</html>

这给我一个错误。

我想让它显示按钮的类选项“ A”。

我该怎么做？

Answer 1

尝试使用Element.getAttribute()

getAttribute()返回元素上指定属性的值。如果给定属性不存在，则返回的值将为null或""（空字符串）；

onclick="clicked(this.getAttribute('class'))"

<html>
  <head>
    <style rel="stylesheet">
      .A { border: 1px solid red; background-color: white }
    </style>
    <script>
      function clicked(c) {
        console.log(c);
      }
    </script>
  </head>
  <body>
    <input type="button" class="A" value="1" onclick="clicked(this.getAttribute('class'))">
  </body>
</html>

或：使用Element.className

className获取并设置指定元素的class属性的值。

onclick="clicked(this.className)"

<html>
  <head>
    <style rel="stylesheet">
      .A { border: 1px solid red; background-color: white }
    </style>
    <script>
      function clicked(c) {
        console.log(c);
      }
    </script>
  </head>
  <body>
    <input type="button" class="A" value="1" onclick="clicked(this.className)">
  </body>
</html>

OR：即使您可以传递 this 对象，以便您可以根据需要访问函数内的所有属性：

onclick="clicked(this)"

<html>
  <head>
    <style rel="stylesheet">
      .A { border: 1px solid red; background-color: white }
    </style>
    <script>
      function clicked(c) {
        console.log(c.className);
      }
    </script>
  </head>
  <body>
    <input type="button" class="A" value="1" onclick="clicked(this)">
  </body>
</html>

Answer 2

这是您的解决方案。使用DOM元素className。

<html>
<head>
	<style rel="stylesheet">
		.A { border: 1px solid red; background-color: white }
	</style>
	<script>
		function clicked(c) {
			console.log(c);
		}
	</script>
</head>
<body>
	<input type="button" class="A" value="1" onclick="clicked(this.className)">
</body>
</html>

Answer 3

您可以将this传递给该函数，然后该函数将可以访问所有input元素属性，其中className可以访问，但是您也可以访问其他任何属性属性，无需更改调用机制

<html>
<head>
	<style rel="stylesheet">
		.A { border: 1px solid red; background-color: white }
	</style>
	<script>
		function clicked(v) {
			console.log(v.className,v.value,v.type);
		}
	</script>
</head>
<body>
	<input type="button" class="A" value="1" onclick="clicked(this)">
</body>
</html>

如何给一个类作为函数的参数？

3 个答案: