Javascript 函数，尝试创建链接并设置其对齐方式

Question

好吧，让我们先看看这个:

function displayResult() {
    var a = document.createElement('a');
    var linkText = document.createTextNode("my title text");
    a.appendChild(linkText);
    a.title = "my title text";
    a.style.cssText = "text-align:center;"
    a.href = "http://example.com";
    document.body.appendChild(a);
}

这是通过单击按钮运行的，但是当它创建新链接时它没有与中心对齐。我不确定为什么，我希望得到一些帮助。

Answer 1

要查看居中文本效果，您需要将链接标记设为 block 元素，因为 text-align 属性将仅适用于 block 级元素 (a标签是默认内联的)。您可以使用驼峰式 CSS 属性，例如Javascript:用于 CSS 的 textAlign:text-align :

a.style.display = "block";
a.style.textAlign = "center";

这是一个工作示例:

function displayResult() {
  var a = document.createElement('a');
  var linkText = document.createTextNode("my title text");
  a.appendChild(linkText);
  a.title = "my title text";
  a.style.textAlign = "center";
  a.style.display = "block";
  a.href = "http://example.com";
  document.body.appendChild(a);
}

<button onclick="displayResult()">Click</button>

或者您也可以使用 cssText属性(感谢在评论中提及):

a.style.cssText = "text-align:center; display: block;";

function displayResult() {
  var a = document.createElement('a');
  var linkText = document.createTextNode("my title text");
  a.appendChild(linkText);
  a.title = "my title text";
  a.style.cssText = "display:block; text-align:center;";
  a.href = "http://example.com";
  document.body.appendChild(a);
}

<button onclick="displayResult()">Click</button>