Img 文件名作为标题和 alt 属性来自 CSS

Question

我想知道是否可以动态写入与img文件名相同的ALT&title属性值？我认为使用 css content 属性是可能的，但对此了解不多。

喜欢<img src="file_name.jpg" alt="File Name" title="File Name">

如果可能的话，我也希望这两个属性都具有干净和格式化的值，就像我不想要 _ 下划线一样。也许它也可以从 CSS 中删除？

Answer 1

$('img').attr({ //change multiple attributes
    title: $(this).attr('src').replace('_', '').replace('.jpg', ''), //to the src attr without _ and .jpg
    alt: $(this).attr('src').replace('_', '').replace('.jpg', '')
});

您不能使用 content 因为：

CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page.

这会将文本放在元素的前面或后面，但不会更改它的属性！

Img 文件名作为标题和 alt 属性来自 CSS

Img file name as title & alt attribute from CSS

html

javascript

css

jquery

w3c-validation