在文本中定位带有嵌入外部值的java脚本元素

时间:2016-09-06 14:51:25

标签: javascript html css formatting

我正在研究使用" Editey"在Google云端硬盘上托管的简单单页网站。工具。我需要的是将对应的Google电子表格的单个单元格列表中的数字统计值嵌入到我的网站文本的各个行中。它几乎完成了,但最终值无法在确切位置修复。细胞值" 3"必须显示在我的文字的一行中,紧跟在单词" Alex"之后,但是跟随id元素的段落标记" Alex"没有让它一起解决所有问题。如何设置我的文字" Alex"和嵌入的结果" 3"在一行中,让它看起来像Alex3(" 3"样式为红色标注)?



// https://google,developers.appspot.com/chart/interactive/docs/spreadsheets#gid
      google.load('visualization', '1', {packages: ['corechart', 'line']});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1iVtRu6vQHmyNyXQdqGmoODhz3Vi9LJQSbEyAiw4t1Ww/edit?usp=sharing";
        var query = new google.visualization.Query(spreadsheetUrl);
        query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
        var dataTable = response.getDataTable();
        // https://developers.google.com/chart/interactive/docs/reference?hl=en#methods
        // getValue(rowIndex, columnIndex)
        
        document.getElementById("Alex").innerHTML = dataTable.getValue(2, 1);
      }

#Alex {
    vertical-align: super;
    font-size: 10px;
    color: red;
}

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="code.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
<body>
    <p>Alex 
    <p id="Alex"> </p>
        
  </body>
</html>
&#13;
&#13;
&#13;

提前感谢您的关注:)

1 个答案:

答案 0 :(得分:0)

假设错误的HTML缺少</head>&amp; </p>标记是拼写错误,如果要将两个值放在同一行,可以使用以下两种方法中的一种:

原因 - 在HTML <p>标签中默认为block个元素(display: block;),每个块元素都会延伸到宽度的100%,因此他们将一个堆叠在另一个之下而不是一个在另一个之内/旁边(这是你想要的)。如果您想将它们放在另一个旁边,则必须明确将display属性从block更改为inline-block

方法1 : 将两者设为<p>所需的display: inline-block代码。

p {
  display: inline-block;
}

方法2 (我更喜欢这个): 不要使用<p>的{​​{1}}标记,而是在外部#Alex元素中使用<span>,而不是这样 -

<p>

因为默认情况下<body> <p>Alex <span id="Alex"> </span> </p> </body> 具有<span>属性。

希望这会有所帮助。