Question

我试图将自定义css放在仅由＆＃34; div＆＃34;加载的插件上。所以我无法改变它

插件输出为：

<input type="file" name="file" accept=".jpg,.jpeg,.gif,.png">

我需要将其设置为

<input type="file" id="file" name="file" accept=".jpg,.jpeg,.gif,.png">

使用javascript

我已经尝试了

<script type="text/javascript">
    document.getElementsByName('file')[0].setAttribute('id','file');
</script>

然后它返回未捕获的TypeError：无法读取属性＆＃39; setAttribute＆＃39;未定义的

先谢谢！

Answer 1

作为备用CSS选项，您可以包装div并使用嵌套样式，例如。

<div id="container"> 
  <div> // Generated stuff</div>
</div>

然后在你的风格

#container {
  // General styling
}

#container > div > input {
  // Other styles 
}

Answer 2

你能够将输入元素包装在你自己制作的另一个元素中吗？如果是这样，你可以给div一个id;使用id来获取div的对象引用;然后使用div对象的.firstChild属性来引用input元素。然后为input元素对象分配一个id。例如：

    <div id="d1">
    <input type="file" name="file" accept=".jpg,.jpeg,.gif,.png">
    </div>

    <script>
    let d = document.getElementById("d1");
    let ip = d.firstChild;
    ip.id = "file";
    </script>

Answer 3

您想使用document.querySelector()，与document.getElementsByName()不同，它返回一个DOM元素（第一个匹配选择器），而不是DOM元素集合。而不是使用name，让我们使用一个很难在页面中的任何其他元素上找到的选择器：

let el = document.querySelector('[accept=".jpg,.jpeg,.gif,.png"]');
el.id = 'mahFile'

let el = document.querySelector('[accept=".jpg,.jpeg,.gif,.png"]');
el.id = 'mahFile';
console.log(el.getAttribute('id'))

<input type="file" name="file" accept=".jpg,.jpeg,.gif,.png">

这就是我选择那个元素的方式但是，正如Jaromanda所意识到的那样，问题在于，实际上，在运行脚本时，DOM中的元素尚未出现。根据加载该脚本所需的时间，以下内容可能有效，也可能无效：

由于您无法在脚本加载时调用函数，因此您还可以检查元素是否已添加到页面中。如果还没有，请再试一次：

<script type="text/javascript">
  function maybeAddId() {
    let el = document.querySelector('[accept=".jpg,.jpeg,.gif,.png"]');
    if (el) {
      el.id = 'mahFile';
      console.log('Success!', el.getAttribute('id'))
    } else {
      console.log('element is not yet in DOM...')
      setTimeout(maybeAddId, 1000);
    }
  }
  maybeAddId();
</script>

<input type="file" name="file" accept=".jpg,.jpeg,.gif,.png">

随意跑1秒以上。

Answer 4

试试这个：

  var el = document.querySelectorAll("[name='file']");
  el.setAttribute("id", "file");

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

Answer 5

这是一种更简单的方法：

document.querySelector("input[type='file']").id = "file";

添加＆＃34; id＆＃34;使用javascript进入<input />标签

5 个答案: