JS 实现 post 内图片和表格居中

2020-03-21 · 836 words · edit

通过原生 JS 获取 img 和 tables 标签实现，由于会和其他插件冲突，所以没有将该实现加入主题。

代码中 onload 是页面初始化后加载 JS 代码，onresize 是监听窗口变化。

window.onload = toCenter;
window.onresize = toCenter;

function toCenter() {
  var post = document.getElementsByClassName("post");
  if (post.length > 0) {
    var imgs = document.getElementsByTagName("img");
    for(var i = 0; i < imgs.length; i ++) {
      if(imgs[i].offsetWidth <= post[0].offsetWidth){
        imgs[i].style.marginLeft = (post[0].offsetWidth - imgs[i].offsetWidth) / 2 + "px";
      }
    }
    
    var tables = document.getElementsByTagName("table");
    for(var i = 0; i < tables.length; i++) {
      tables[i].style.marginLeft = 0;   // 初始化
      var trWidth = tables[i].getElementsByTagName("tr")[0].offsetWidth;
      if(trWidth == post[0].offsetWidth) {
        continue;
      } 
      else if (trWidth > post[0].offsetWidth) {      
        tables[i].style.width = "100%"; // 还原
      } 
      else {  // 居中
        tables[i].style.width = trWidth + 1 + "px";
        tables[i].style.marginLeft = (post[0].offsetWidth - trWidth) / 2 + "px"; 
      }
    }
  }
};