在 html 和 css 中使用 javascript 变量

Posted 2023-03-07

【中文标题】在 html 和 css 中使用 javascript 变量

【英文标题】：Use javascript variable in html and css

【发布时间】：2015-07-19 01:35:42

【问题描述】：

<form action="/key" method="POST">
  <label>key_1:</label><br/>
  <input type="text" name="a" pattern="^[a-zA-Z]+$" required/><br />
  <label>key_2: </label><br />
  <input type="text" name="b" pattern="^[a-zA-Z]+$" required/><br />
  <input type="submit" name="submit" value="REQUEST" />
</form>

var socket = io.connect();
jQuery(function($) 
  var aCounter = $('li.a'),
    bCounter = $('li.b'),
    aCounterPercentage = $('li.a span'),
    bCounterPercentage = $('li.b span'),
    aList = $('#a ul'),
    bList = $('#b ul');
  socket.on('percentages', function(data) 
    aCounter
      .css("width", data.a + '%');
    aCounterPercentage
      .text(Math.round(data.a * 10) / 10 + '%');
    bCounter
      .css("width", data.b + '%');
    bCounterPercentage
      .text(Math.round(data.b * 10) / 10 + '%');
  );
  socket.on('a', function(data) 
    $('<img />')
      .attr('src', data.avatar)
      .load(function() 
        aList
          .prepend($('<li>')
            .prepend($('<p>').text(data.user + ': ' + data.text))
            .prepend($(this)));
      );
  );
  socket.on('b', function(data) 
    $('<img />')
      .attr('src', data.avatar)
      .load(function() 
        bList
          .prepend($('<li>')
            .prepend($('<p>').text(data.user + ': ' + data.text))
            .prepend($(this)));
      );
  );
);

body 
  font: 100% Helvetica, Arial, sans-serif


ul.percentage 
  width: 100%;
  float: left


ul.percentage li 
  display: block;
  width: 0;
  padding: 10px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  float: left;
  clear: left


ul.percentage li.a 
  background: #ff0066;
  color: #fff


ul.percentage li.b 
  background: #000;
  color: #fff


ul.percentage li span 
  float: right;
  display: block


ul.tweets 
  float: left;
  clear: both


#stream 
  float: left;
  clear: both;
  width: 100%


#stream ul 
  list-style: none


#stream ul li 
  float: left;
  clear: left;
  width: 100%;
  border-bottom: 1px solid #ccc;
  : 5px;
  padding: 5px 0


#stream ul li:nth-child(even) 
  background: #f8f5f6;


#stream ul li img 
  float: left;
  margin-right: 10px;
  padding: 5px


#a 
  width: 45%;
  float: left


#b 
  width: 45%;
  float: right

<h1>GRAPH BASED ON THE KEYWORD</h1>
<ul class="percentage">
  <li class="a">
    a
    <span>0</span>
  </li>
  <li class="b">
    b
    <span>0</span>
  </li>
</ul>
<section id="stream">
  <section id="a">
    <h2>tweets of A</h2>
    <ul></ul>
  </section>
  <section id="b">
    <h2>tweets of B</h2>
    <ul></ul>
  </section>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>

这是我的代码，我将获取 a 和 b 值，并将分配我将在 from.html 输入框中给出的内容，谁能帮助我如何做。该变量应显示在我的 ul 和 li 类中。

【问题讨论】：

请花时间写出完整、清晰的句子，并使用适当的大写和标点符号。坦率地说，您现在所拥有的内容几乎无法阅读。

我同意，如果您希望人们帮助您，您至少可以为他们做的就是花点时间好好写。只是尊重的问题。

嘿，如果我错了，请纠正我。您是否正在尝试根据用户输入在列表中添加一个值？你的输入框在哪里？

假设如果在我的输入框中给出 a= hello 和 b=hi 它应该分配我给出的值。

@MISY 什么输入框？？当然你在这里遗漏了一些代码......你能包括你的其余代码吗？所以我们可以为您提供适当的帮助

【参考方案1】：

如果你有一些输入让我们说

<input type="text" id="inputA" name="inputA">
<input type="text" id="inputB" name="inputB">

然后你想介绍列表中的值，我建议使用一些 ids 和 classes。

<ul id="ab_list" class="percentage">
      <li id="li_a">
        <span class="val">a</span>
        <span class="per">0</span>
      </li>
      <li id="li_b">
        <span class="val">b</span>
        <span class="per">0</span>
      </li>
</ul>

这样你就可以轻松使用jQuery来做

<script>
  var data_a = $("#inputA").val();
  var data_b = $("#inputB").val();
  $("#ab_list #li_a .val").html(data_a);
  $("#ab_list #li_b .val").html(data_b);
<script>

在这里，您有一个初始 jsfiddle，您可以从中继续您的研究/工作http://jsfiddle.net/pfkx2nm7/。当然，您需要某种事件（按钮单击、按键输入、表单提交...等）来在输入框中提交您的更改。

希望对你有帮助:)

【讨论】：

这段代码对我不起作用。我在发布之前编辑了代码。请看代码。

谁能指导我如何做。