创建jQuery的Vanilla JS等价css方法

在jQuery中，css() 方法用于获取或设置元素的样式属性。在纯JavaScript（Vanilla JS）中，我们可以使用 style 属性来实现类似的功能。以下是jQuery的 css() 方法的Vanilla JS等价实现：

获取样式

在jQuery中：

var color = $('#element').css('color');

在Vanilla JS中：

var element = document.getElementById('element');
var color = window.getComputedStyle(element).getPropertyValue('color');

设置样式

在jQuery中：

$('#element').css('color', 'red');

在Vanilla JS中：

var element = document.getElementById('element');
element.style.color = 'red';

设置多个样式

在jQuery中：

$('#element').css({
  'color': 'red',
  'background-color': 'yellow'
});

在Vanilla JS中：

var element = document.getElementById('element');
element.style.color = 'red';
element.style.backgroundColor = 'yellow';

优势

1. 性能：原生JavaScript通常比jQuery更快，因为它不需要加载额外的库。
2. 简洁性：对于简单的操作，原生代码可能更简洁。
3. 兼容性：现代浏览器对原生JavaScript的支持非常好，而且随着时间的推移，jQuery的使用可能会逐渐减少。

应用场景

• 当你需要对样式进行简单的读取或设置时。
• 在性能敏感的应用中，避免使用额外的库。
• 在构建现代Web应用时，可能会倾向于使用原生API以减少依赖。

可能遇到的问题及解决方法

问题：样式没有按预期应用。

原因：

• 可能是由于CSS优先级问题，即内联样式、内部样式表或外部样式表中的规则覆盖了你的设置。
• 可能是由于JavaScript代码执行顺序问题，即在DOM元素还未完全加载时就尝试修改其样式。

解决方法：

• 确保你的样式设置没有被更高优先级的CSS规则覆盖。
• 使用 window.onload 或 DOMContentLoaded 事件确保DOM元素已经加载完毕后再执行JavaScript代码。

document.addEventListener('DOMContentLoaded', function() {
  var element = document.getElementById('element');
  element.style.color = 'red';
});

通过这种方式，你可以确保在DOM完全加载后再应用样式，从而避免因元素未找到而导致的样式设置失败。