Img 文件名作为 CSS 的标题和 alt 属性答案

【问题标题】：Img file name as title & alt attribute from CSSImg 文件名作为 CSS 的标题和 alt 属性
【发布时间】：2016-02-22 08:07:05
【问题描述】：

我想知道我们是否可以动态写入与img文件名相同的ALT和标题属性的值？我认为可以通过使用 css content 属性来实现，但对此了解不多。

点赞<img src="file_name.jpg" alt="File Name" title="File Name">

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

【问题讨论】：

您是说您想使用 CSS 更改 alt 和 title 属性...并且您认为您可以使用 CSS 更改 src 属性？
@JaromandaX - 我想写两个属性的值与没有 .jpg 的文件名相同

标签： javascript jquery html css w3c-validation

【解决方案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 有一个名为 content 的属性。它只能与伪一起使用元素 :after 和 :before。它写得像一个伪选择器（带有冒号），但它被称为伪元素，因为它不是实际上选择页面上存在的任何内容，但添加页面上的新内容。

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

【讨论】：

是的，@thomas 这就是我正在寻找的答案，但我们可以使用 CSS contentpropoerty 做到这一点吗？