显示具有正确属性的图像 - show images with the right property

show images with the right property

本文关键字：属性图像显示 | 更新日期: 2023-09-27

在我的图库中，我想展示我的图像，但是我有两种格式的图像:1/1:方形格式，2/3:肖像格式。

我为我的ul容器创建了一个类(结果)，并将图像添加到其中。通过修改一些属性，我把它垂直和水平居中。有些图片因为格式的原因显得更小，我不能让width (8em)。

我的问题是:我可以添加frm作为属性到我的图像标签，如src ?如果是，我将从我的数据库中获得这个值。

我的脚本不工作。我的Javascript是:

$(document).ready(function() {
    if ($("ul.result li img").attr('frm')='1/1') 
    {
        $("ul.result li img").css('width','10em');
    }
    if ($("ul.result li img").attr('frm')='2/3') 
    {
        $("ul.result li img").css('width','8em');
    }
});

因为你正在使用jQuery，你可以使用data方法(http://api.jquery.com/data/)和属性在你的html元素来存储你想要的任何东西。作为参考，它看起来像:

<img src="file" data-format="square" />

Javascript

$(function () { $("img").each(function () { if ($(this).data("format") == "square") { // process square image element ("this") } else { // process normal image } }); });
现在，正如其他人注意到的那样，你可以考虑使用css类来改变你的风格，而不是编写一堆Javascript代码。我考虑编写javascript(而不是css)的唯一原因是需要进行复杂的计算。但是，大多数情况下，如果您正确地构建html，则可以使用纯css(不使用Javascript)完成所需的任何操作。

为什么要用javascript呢?
你有一个数据库属性，你正在根据数据库属性修改css属性。这就是上课的目的!
<img class=<?php (img.frm=="1/1"?"square":"portrait") ?> src=..... />
然后，在你的css中:

.square{ width: 10em; } .portrait{ width: 8em; }

如果你想添加一个自制属性，使用HTML5的data属性，所以它是有效的:data-portrait和data-landscape将做得很好。

这些属性可以通过CSS或js访问

回答你的问题

是的，你可以，但我建议使用:data-frm作为属性名，并避免在值中使用特殊字符。

一些来自W3C的阅读:)