javascript - 使用 jQuery 更改 CSS 属性

标签 javascript jquery html css twitter

我正在尝试使用 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/

相关文章:

javascript - bxSlider 在 IE10 中不工作

javascript - 如何替换不同部分中的拖放元素

javascript - jQuery startInterval 和clearInterval 在不同的函数中

javascript - 函数调用 Jquery 时浏览器卡住

jquery - jquery 是否取代了 dojo 的需要?

Javascript更改div的位置并在应用动画后

javascript - 如何使用 JQuery 更改网页外观?

javascript - 预加载图像而不触发浏览器上的 "loading"图标

javascript - typescript :上下文保存。这样做是个好主意吗?

javascript - Li 元素在单击时不会保持选中状态