可以在纯 HTML 中使用 JavaScript 变量吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3452485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can a JavaScript variable be used in plain HTML?
提问by Latze
What I mean is, can a variable/array declared and initialized be used in HTML, outside the <script>-tags? Fx.
我的意思是，在<script>-tags之外的 HTML 中可以使用声明和初始化的变量/数组吗？外汇。
<script type="text/javascript">
var foo = array('placeholder1', 'placeholder2');
</script>
<body>
<p><!--access the variable here-->foo[0]</p>
</body>
How do you access the variable/array in this case? like this:
在这种情况下如何访问变量/数组？像这样：
<p><script type="text/javascript">document.print(foo[0])</script></p>
??
??
回答by jtbandes
Two ways to do this. This is the better one:
有两种方法可以做到这一点。这是更好的一个：
<script type="text/javascript">
// make sure to do this onLoad, for example jQuery's $()
var foo = array('placeholder1', 'placeholder2');
document.getElementById("fooHolder").innerHTML = foo.toString();
</script>
...
<p id="fooHolder"></p>
Or you could do it this way (which, as Marcel points out, doesn't work in XHTML and really shouldn't be used anyway):
或者你可以这样做（正如 Marcel 指出的那样，它在 XHTML 中不起作用，并且无论如何都不应该使用）：
<p><script type="text/javascript">document.write(foo)</script></p>
回答by Sarfraz
You can do something like this:
你可以这样做：
<script>
var str = 'hello there';
document.getElementById('para').innerHTML = str;
</script>
where an element has the specified id:
其中元素具有指定的 id：
<p id="para"></p>
回答by Ibrahim Azhar Armar
you simply cannot access javascript variable outside of the script tag, it is because,
您根本无法访问脚本标记之外的 javascript 变量，这是因为，
- Html does not recognise any variable it just renders the supported HTML elements
- variables are used to store the temporary variables, that is for dynamic data, if you want something more dynamic then you can use PHP for that.
- Html 不识别任何变量，它只是呈现支持的 HTML 元素
- 变量用于存储临时变量，即用于动态数据，如果您想要更动态的东西，那么您可以使用 PHP 来实现。
回答by Anthony
Unnecessarily verbose, but using standard DOM methods.
不必要的冗长，但使用标准的 DOM 方法。
<script>
window.onload = function(){
// you do not need to initialize like this, but I like to
var bar1 = new String('placeholder1');
var bar2 = new String('placeholder2');
var foo = new Array();
// populate the Array with our Strings
foo.push(bar1);
foo.push(bar2);
// create an array containing all the p tags on the page
// (which is this case is only one, would be better to assign an id)
pArray = document.getElementsByTagName('p');
// create a text node in the document, this is the proper DOM method
bar1TextNode = document.createTextNode(foo[0].toString());
// append our new text node to the element in question
pArray[0].appendChild(bar1TextNode);
};
</script>
<body>
<p></p>
</body>
回答by Mike
You can even you AngularJS expression.
您甚至可以使用 AngularJS 表达式。
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.framework= "AngularJS";
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>I want to use variables directly in HTML using: {{ framework }}</p>
</div>
</body>
</html>
The above code will print out "I want to use variables directly in HTML using: AngularJS".You can use braces to write AngularJS expression. For example: {{ expression }}.
上面的代码会打印出“I want to use variables directly in HTML using: AngularJS”。可以使用大括号来编写AngularJS表达式。例如：{{ 表达式 }}。
回答by dockeryZ
That's the only direct way you'll access it elsewhere in your page. By opening another script tag and printing it.
这是您在页面其他地方访问它的唯一直接方式。通过打开另一个脚本标签并打印它。
You can also use methods such as innerHTML to put the value somewhere.
您还可以使用诸如innerHTML 之类的方法将值放在某处。
回答by David Daniel
I don't think you can access the javascript from html but you can set the innerhtml of a dom object through javascript so you may want to go the other way around. First google search I found so I cant promise its good but it has a quick sample.
我不认为您可以从 html 访问 javascript，但是您可以通过 javascript 设置 dom 对象的 innerhtml，因此您可能想要反过来。我发现的第一个谷歌搜索所以我不能保证它的好但它有一个快速的样本。
