如何在一个类中使用 getElementById 获取值并在不同的类中使用它答案

【问题标题】：How to get the value with getElementById in a class and use it in a different class如何在一个类中使用 getElementById 获取值并在不同的类中使用它
【发布时间】：2013-08-20 14:23:38
【问题描述】：

<body>
    <div class="container">
        Input
        <form class="form-inline" role="form">
            <div class="form-group">

                <input type="text" class="form-control" id="getString" placeholder="Enter some string">

            </div>
            <button type="button" class="btn btn-primary" id="nowBtn">Now</button>
        </form>

        <br/>
        <br/>

        All Headings<textarea class="form-control" rows="6"></textarea>
    </div>   
</body>

我正在使用引导程序，当按下“现在”按钮时，我将在表单中提供一些字符串。
我应该在 textarea 中获得该字符串的 <h1> 标记（即在 textarea 中应用 <h1>some string</h1> 并应用 <h1> 标记）。

它可以实现吗？我想使用 jQuery。

【问题讨论】：

请英语好的人编辑这个问题。我不这样做是因为英语不是我的第一语言
@Huangism 对不起，你没听懂什么？
OP依然孤独。
html 中用于标题的 h1 标记
你不能在输入值中使用 HTML，如果这是你想要做的，至少它不会呈现，因为只允许字符串？

标签： javascript jquery twitter-bootstrap

【解决方案1】：

根据您的 cmets，我了解到您希望将 textarea 中的 font-size 设置为与 h1 标记相同的大小。

由于您的HTML中没有h1标签，您需要在#nowBtn的点击事件处理函数中创建一个：

var header = document.createElement('h1'),
    size = window.getComputedStyle(header, null).fontSize; // Depending used browser and CSS, this returns for example 32px

然后你可以像这样设置textarea的font-size：

$('textarea').css('font-size', size);

A live demo at jsFiddle.

编辑

正如 bfavaretto 所提到的，一种跨浏览器的方法是使用 jQuery 来获取 h1 的大小：

size = $(header).css('font-size');

【讨论】：

你为什么不使用 jquery 来获取大小呢？
@bfavaretto 我的 jQuery 技能太差了……这两行还能更短/更快吗？
我的意思是你可以使用size = $(header).css('font-size') 来获取新创建的h1的计算样式（并且它是跨浏览器的）。
@bfavaretto 哦，我没有意识到，jQuery 也会找到未附加的元素。征得您的同意，我将更改答案。并感谢您的信息:)。

【解决方案2】：

看看这个小提琴 - 它可能是你想要的。 http://jsfiddle.net/Nj7pj/

$(document).ready(function () {
    $('.btn-primary').on('click', function () {
        inputVal = $('#getString').val();
        newTextAreaVal = "<h1>" + inputVal + "</h1>";
        $('textarea').val(newTextAreaVal);
    });
});

【讨论】：

h1 在这里不是一个值，h1 是 html 中的标题标签，我希望那个文本那么大

【解决方案3】：

我觉得你可以的

var h1 = $("h1.classYouWant"); 
$(".form-control").val( "<h1>" + h1.text() + "</h1>" );

如果是动态标题（h1 或 h2 或 h3）

你可以的

var header = $(".classYouWant").get(0);
$(".form-control").val( header.outerHTML );

【讨论】：