使用原生 javascript 更改元素的属性和文本

Question

我在 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>

但它不起作用

Answer 1

首先，您需要对.link.auto_open元素的引用。 您可以使用document.querySelector做到这一点： https : //developer.mozilla.org/nl/docs/Web/API/Document/querySelector

那么你需要做三件事：

• 更新href ( https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute )
• 设置 HTML ( https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML )
• 更改 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');

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

如果你把这一切结合起来，你会有这样的事情：

https://jsfiddle.net/8j8w615p/

Answer 2

您可以在 javascript 中使用 DOM 元素的 setAttribute() 属性。 例子 ：

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