V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ggp1ot2
V2EX  ›  程序员

html 如何只通过 CSS 控制图片在新窗口打开

  •  
  •   ggp1ot2 · 2022-11-29 11:30:58 +08:00 · 1343 次点击
    这是一个创建于 506 天前的主题,其中的信息可能已经有所发展或是发生改变。

    rt 。

    只能在<style>中修改页面 css 或者在<script>中添加 js 代码,无法修改 html 标签的内容。

    如何实现控制点击 a 标签下的图片,在新窗口打开?

    貌似无法在 css 中设置 html 标签 target = _blank,尝试设置 img css 的属性也不行

    target-name:new;
    target-new:tab;
    

    我尝试使用在 head 下添加 <base target="_blank">,但是这样所有可以点击的按钮都在新窗口打开了。

    有没有办法只通过 css 来实现,只有 img 标签在新窗口打开

    5 条回复    2022-11-29 13:09:52 +08:00
    libook
        1
    libook  
       2022-11-29 11:37:51 +08:00
    可以写 JS 不就可以在运行时操作 HTML 了嘛。document.querySelector 选中要操作的图片 DOM ,然后 setAttribute target 改成_blank
    TGl2aWQgIFNC
        2
    TGl2aWQgIFNC  
       2022-11-29 11:40:05 +08:00
    同楼上,那就用 js 去修改 DOM 呗
    gra
        3
    gra  
       2022-11-29 11:45:05 +08:00
    js 简单,还不用考虑兼容
    BeijingBaby
        4
    BeijingBaby  
       2022-11-29 11:54:38 +08:00
    a[href="http"] { target: new; target-name: new; target-new: tab; }
    thinkershare
        5
    thinkershare  
       2022-11-29 13:09:52 +08:00
    纯 CSS 理论上来说可以实现,但是因为浏览器并没有实现你要的规范,因此目前此问题无解。
    本来应该生效的方案:a:has(img) { target-new:tab; target-name:new; }
    但是: 目前没有任何浏览器实现 target property css rule 。
    另外,此问题 SO 上面已经有此问题的完整答案了,没必要在这里提问了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1217 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 23:25 · PVG 07:25 · LAX 16:25 · JFK 19:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.