我正在尝试使用 jQuery 更改 CSS 文件夹中的 UL 图像。这是针对 Twitter 流的,其中帐户发布的头像随推文一起更改。
使用 .css
非常简单,但我很难更改新图像的 URL。
这是我的客户端代码:
$(document).ready(function(){
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('info', function(data){
console.log("this is teh question" + " " + data);
$("#tweets").prepend("<li>" + data + "</li>");
});
socket.on('reply', function(data){
console.log("this is my reply" + " " + data);
$("#messages").prepend("<li>" + data + "</li>");
});
socket.on('userPic', function(data) {
console.log("the userPic: " + data);
$("ul#tweets").css("list-style-image: url", data);
});
});
还有 CSS:
body {
font: 13px Helvetica, Arial;
max-width: 1250px;
width: 100%;
margin: auto;
}
form {
background: #fff;
padding: 10px;
width: calc(100% - 20px);
display: inline-block;
border-bottom: 1px solid #ccc;
}
form input {
border: 3px inset;
padding: 7px 5px;
width: calc(100% - 140px);
margin-right: 10px;
display: inline-block;
font-size: 15px;
}
form button {
width: 110px;
background: #177cc1;
color: #fff;
border-radius: 6px;
text-transform: uppercase;
font-size: 22px;
border: none;
padding: 5px 10px;
display: inline-block;
cursor: pointer;
}
form button:hover {
background: #177cee;
}
form button:active {
background: #177caa;
}
form button:focus {
outline: 0;
}
.container {
display: inline-block;
width: calc(100% - 60px);
padding: 20px;
margin: 5px 10px 20px;
background: #222;
}
.content {
display: inline-block;
width: 100%;
box-shadow: 1px 1px 1px 1px #555;
border: 1px solid #555;
}
.tweets_container {
display: inline-block;
width: 100%;
background: #fff;
}
.header {
font-size: 32px;
text-align: center;
text-transform: uppercase;
color: #fff;
background: #333;
padding: 15px;
}
#messages, #tweets {
display: inline-block;
margin: 5px;
padding: 10px;
width: calc(50% - 32px);
}
#tweets li, #messages li {
padding: 10px;
font-size: 18px;
}
#messages {
background: #444;
color: #fff;
}
ul#tweets {
list-style-image: url("");
height: 100px;
width: 100px;
}
ul#messages {
list-style-image: url("");
height: 100px;
width: 100px;
}
#tweets {
background: #fff;
color: #333;
}
.footer {
}
最佳答案
我相信这一点:
$("ul#tweets").css("list-style-image: url", data);
应该改为:
$("ul#tweets").css("list-style-image", "url('"+data+"')");
关于javascript - 使用 jQuery 更改 CSS 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33067260/