时间戳

首页 > 解决方案 > 当样式属性在宽度或高度之后排序时，jQuery 元素创建会删除宽度和高度

javascript - 当样式属性在宽度或高度之后排序时，jQuery 元素创建会删除宽度和高度

问题描述

经过很长时间的搜索，我发现了这种奇怪的行为：

见小提琴：https ://jsfiddle.net/723xhcrf/

当您使用参数创建元素时，宽度和高度（可能更多）被添加到样式参数中，如下所示：

$('<div>', {'width': '50px', 'height': '50px'});

给

<div style="width: 50px; height: 50px;">

但是当你已经有了一个样式时，会根据 params 对象的键顺序发生一些奇怪的事情。

$('<div>', {'width': '50px', 'style': 'background-color:blue;', 'height': '50px'})

给

<div style="background-color: blue; height: 50px;">

和

$('<div>', {'height': '50px', 'style': 'background-color:blue;', 'width': '50px'})

给

<div style="background-color: blue; width: 50px;">

您在这里看到的是第一个宽度或高度（可能更多）被其后的样式属性覆盖。我希望这两种情况下的宽度和高度都附加到样式属性中。

所以我的解决方案是有一个对参数进行排序的函数，以便样式参数始终是参数对象中的第一个键。

有谁知道是否需要这种行为，或者这是 dom 元素的 jquery 创建中的错误？

标签： javascriptjquery

解决方案

作为第二个参数传递的对象不仅仅是新元素的一组属性。它们更像是对 jQuery 方法的隐式调用。只有当属性名称不是 jQuery 方法时，它才会被视为简单属性。

因此，

$("<div/>", { width: "100px" })

实际上就像

let div = $("<div/">");
div.width("100px");

因此，当您还添加“样式”值时，它不会被视为方法调用。由于对象属性名称排序的工作方式，如果它出现在您的“宽度”属性之后，它将覆盖“宽度”隐式调用建立的“样式”值。

确实，控制样式的正确做法是使用“css”属性：

$("<div/>", { css: { height: "50px", width: "50px", backgroundColor: "red" } })

您还可以执行设置内容等操作：

$("<div/>", {
  text: "Hello World",
  id: "some-id",
  css: {
    height: "50px",
    width: "50px",
    backgroundColor: "red"
  }
})

推荐阅读