Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>src,srcset 与 JS 的交互 by 一丝</title>
  <link rel="stylesheet" href="http://g.tbcdn.cn/thx/cube/1.0.5/neat.css">
</head>
<body>
<div class="box">
  <h1>src,srcset 与 JS 的交互</h1>
  <p>需要开启 Chrome 的 flags，chrome://flags/#enable-experimental-web-platform-features</p>
<input type="button" value="改变src" onclick="change()"/>
<input type="button" value="改变srcset" onclick="changeSrcset()"/>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" srcset="http://www.w3.org/html/logo/downloads/HTML5_Badge_512.png 2x" alt="测试响应式图片" />
</div>
</body>
</html>
​
​
 
h1,h2{
  font-weight: normal;
}
​
.box img{
  display: block;
  padding-bottom: 50%;
  position: relative;
  content:"";
  border:1px solid #CCC;
  background: url(http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png) 50% 50% no-repeat;
}
​
.box input{
  padding:6px 12px;
  margin: 10px auto 5em;
}
​
.box img:after,
.box img:before{
  position: absolute;
  z-index:1;
  width: 100%;
  color: green;
}
​
.box img:after{
  content:"srcset = "attr(srcset)"";
  top:-3em;
}
​
.box img:before{
  content:"src = "attr(src)"";
  top:-5em;
}
​
.box{
  width: 600px;
  margin: 10px auto;
  font-size:14px;
}
​
​
 
var img = document.querySelector('img');
​
function change() {
  img.src = "src-new.png";
  // 如果忘了设置 srcset 则浏览器不会换图片。
  // img.srcset = "";
}
​
function changeSrcset() {
  img.srcset = "srcset-new.png 1x";
}
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers