使用jQuery更改CSS属性(Changing CSS properties using jQuery)
我正在尝试使用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 { }I am trying to change the UL image in the CSS folder using jQuery. This is for a Twitter stream, where the avatar of the account posting is changed alongside the tweet. Using .css is pretty straight forward, but I am struggling to change the URL for the new image.
Here is my client code:
$(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); }); });And the 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+"')");I believe this:
$("ul#tweets").css("list-style-image: url", data);should be changed to:
$("ul#tweets").css("list-style-image", "url('"+data+"')");
更多推荐
发布评论