将Javascript Onclick添加到.css文件

不知是否有人能帮助我

我使用页面允许用户查看他们的图像库

您可以看到，我在每个图像的底部添加了一个十字，用于删除图像，这在我的

.css

文件中设置为：

 .galleria-thumbnails .galleria-image {
    width: 80px;
    height: 80px;
    float: left;
    margin: 0 7px 7px 0;
    border: 2px solid #fff;
    cursor: pointer;
    background: url(cross.png) no-repeat bottom;
    padding-bottom: 20px;
    background-color:#FFFFFF;

我的问题是，我非常不确定如何使用Javascript命令将单独的

.ccs文件中的图像链接到我的gallery页面上的图像

我只是想知道是否有人能为我如何克服这个问题提供一些指导

感谢并问候
您需要添加一个元素（例如span）来处理点击。我可以看到你实际上已经有了这样的东西：

<span class="btn-delete icon-remove icon-white"></span>

你需要做的就是应用这些样式，这样你就可以实际使用它了。比如：

.galleria-thumbnails .btn-delete {
    display: block; /* Or just use a div instead of a span*/
    position: absolute;
    bottom: 0px; /*align at the bottom*/
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: url(cross.png) no-repeat bottom;
}

CSS用于样式，而JS用于行为。你不能把两者混为一谈，而且两者在功能上并不相关。您需要的是删除图像的JS

符合标准的JS版本

var db = document.querySelectorAll('.galleria-thumbnails .btn-delete'),
    dbLength = db.length,
    i;

for(i=0;i<dbLength;i++){
     db[i].addEventListener('click',function(){
        var thumbnail = this.parentNode;
        thumbnail.parentNode.removeChild(thumbnail);
    },false);
}

如果在
中使用设置上述样式表，只需编写onclick事件

这是样品

<td id="Homebutton" runat="server" style="height: 35px; width: 101px; cursor: pointer;"
                class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'"
                onmouseout="this.className= 'menubuttonhome'">
                Home
            </td>

感谢您抽出时间回复我的帖子和解决方案。我想这是你们三个人的问题。你们都很友好地为我提供了不同的解决方案。但我对Javascript和相关的编码非常陌生。从初学者的角度来看，您如何知道使用哪种解决方案？这仅仅是因为个人喜好。感谢您花时间回复并提供解决方案。有一些小的调整要做，因为我正试图让图标在'底部中间'，但它的作品处理。善良的regardsHi@Arun，非常感谢您抽出时间回复我的帖子，感谢您的帮助。为什么创建一个表只是为了添加一个侦听器？我创建它是为了在适当的位置放置更多的按钮。如果你有更好的想法，跟我分享，伙计……所有这些想法基本上都是一样的；这有点违背了表的用途，但我想使用内联CSS/JavaScript的人不会太在意语义。
$('.galleria-thumbnails').on('click','.btn-delete',function(){
    $(this).closest('.galleria-image').remove()
})

<td id="Homebutton" runat="server" style="height: 35px; width: 101px; cursor: pointer;"
                class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'"
                onmouseout="this.className= 'menubuttonhome'">
                Home
            </td>

 .menubuttonhome
        {
            background-image: url('Images/homebutton.png');
            background-repeat: no-repeat;
            vertical-align: top;
            color: #005a8c;
            font-family: Arial;
            padding-top:11px;
            font-size: 10pt;
            font-weight: 500;
        }