动态创建元素后边框属性不起作用

Question

我创建了一个 div 元素。在其中包装了一个文本框，然后我更新了它的边框属性，但它没有显示出来。这里有什么问题？？

var div =$('<div id="myDiv"></div>').css("border", "1px solid black");
$("#text1").wrap(div);
div.css("border", "1px solid red");
alert(div.css("border")); // it is showing 1px solid red

Answer 1

您的“div”只是一个变量，而不是一个元素。 改用 id：

$("#myDiv").css("border", "1px solid red");

这里有解释和存储元素的正确方法：

// here you create a object that has no connection to the dom
var div =$('<div id="myDiv"></div>').css("border", "1px solid black");

// here you add a object to the dom that has the same values as your object - but it's a seperate entity
$("#text1").wrap(div);

// here you only update your first object - it will never reflect on it's twin in the dom - 
// so remove this line:
// div.css("border", "1px solid red");

// so instead, save the real element to your variable
div = $("#myDiv");

// now you can work with it and it will update in the dom!
div.css("border", "1px solid red");

// you also need to know that since this is now a real div in your dom, you need to explicitly state which border you want:
// https://stackoverflow.com/questions/3787502/how-to-get-border-width-in-jquery-javascript
alert(div.css("border-left-color")); 

var div =$('<div id="myDiv"></div>').css("border", "1px solid black");
$("#text1").wrap(div);
div = $("#myDiv");
div.css("border", "1px solid red");
alert(div.css("border-left-color")); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text1">Text1</div>