更改元素'；使用本机javascript创建属性和文本

我在jQuery中有以下代码：

$(document).ready(function() {
    $(".link.auto_open").prop("href", "http://newlink.com/");
    $(".link.auto_open").html("Need inspiration?").fadeIn(600).css("display","inline-block");
});

--但是我需要在一个不使用jQuery的站点中实现这一点。如何将此代码更改为本机javaScript

这就是我尝试过的：

<script>
    var x = document.getElementsByClassName("link.auto_open");
    x.setAttribute("href", "http://newlink.com/");
    x.innerHTML("Need inspiration?");
</script>

var x=document.getElementsByClassName（“link.auto_open”）；
x、 setAttribute（“href”http://newlink.com/");
x、 innerHTML（“需要灵感吗？”）；

---

但是它不起作用

您可以在javascript中使用DOM元素的setAttribute（）属性。 例如：

var ele = document.getElementById("textBoxId");
ele.setAttribute("value","James Bond");

---

首先，您需要对

.link.auto\u open

元素的引用。 您可以使用

文档执行此操作。querySelector

：

然后你需要做三件事：

• 更新

  href

  （）
• 设置HTML（）
• 更改CSS

下面是一个例子：

var el = document.querySelector('.link.auto_open');

el.setAttribute('href', 'http://newlink.com/');
el.innerHTML = 'Need inspiration?';
el.style.display = 'block';

现在对于

fadeIn

部分来说，使用JS可能有点棘手，但是使用CSS动画可以很容易地完成

例如：

.fadeIn {
    display: block;
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 100;  }
}

如您所见，动画属于类

fadeIn

，因此我们也必须将该类添加到元素中。由于

fadeIn

类也有一个

display:block

，我们可以将JS示例中的最后一行替换为：

el.classList.add('fadeIn');

如果你把这一切结合起来，你会得到这样的东西：

---

MDN是JSAPI的一个优秀资源。（第二个谷歌结果也是）你试过什么？在javascript中查找

setAttribute

方法和'

innerHTML

。它可能有助于您创建，然后使用类似于

querySelectorAll

的内容获取元素，然后真正困难的部分是，您必须创建自己的功能。此外，在简单的JS中

prop（）

只是

element.href=http://newlink.com/';为动画使用CSS转换。这正是我想要实现的。谢谢。