Question

我试图在用户点击它时从html按钮获取src值。

<button type="button" value="95" id="load" onclick="functionName(this.src,this.value);">
    <img src="https://www.drupal.org/files/druplicon-small.png">
    <span>Welcome</span>
</button>

成功从this.value获取价值但this.src没有给出任何价值。

Answer 1

this指的是没有src属性的按钮。按钮内的图像具有src属性。

您可以使用this或src

将button.children[0].src传递给您的函数并访问该图片的button.getElementsByTagName('img')[0].src

function functionName(button, value) {
  let src1 = button.children[0].src;
  let src2 = button.getElementsByTagName('img')[0].src;
  console.log(src1, src2, value);
}

<button type="button" value="95" id="load" onclick="functionName(this,this.value);">
  <img src="https://www.drupal.org/files/druplicon-small.png">
  <span>Welcome</span>
</button>

Answer 2

通常情况下，当您将此传递给该功能时，此是您的按钮，或者在您的情况下，this.value是您的属性值按钮和this.src你的按钮属性src的值，你没有按钮src属性

你能做什么？：

将唯一的参数传递给您的函数并在那里，获取属性值的值。
在你的功能中，通过这个，获取子图像并获取它属性src

是这样的：

function functionName(button) {
  var buttonValue = button.value;
  var imageSrc = button.getElementsByTagName('img')[0].getAttribute('src');
}

<button type="button" value="95" id="load" onclick="functionName(this);">
  <img src="https://www.drupal.org/files/druplicon-small.png">
  <span>Welcome</span>
</button>

Answer 3

如何使用querySelector定位图像源

示例：

function functionName(button) { var src = button.querySelector("img").src; console.log(src); }

<button type="button" value="95" id="load" onclick="functionName(this);"> <img src="https://www.drupal.org/files/druplicon-small.png"> <span>Welcome</span> </button>

Answer 4

传递背景this＆amp;使用children方法。该按钮没有src属性，属于img标记，因此children会给出一系列子项。

function functionName(elem) {
  //elem will be button itself
  var _childImg = elem.children[0].src
  console.log(_childImg, elem.value)
}

<button type="button" value="95" id="load" onclick="functionName(this);">
                        <img src="https://www.drupal.org/files/druplicon-small.png">
                        <span>Welcome</span>

    </button>

如何获取按钮标记的子标记的值

4 个答案: