[英]CSS style doesn't apply when javascript code is executed
I'm catching a GET request from another page with PHP and displaying all the info to the user with something that looks like this (Using bootstrap): 我正在使用PHP从另一个页面捕获GET请求,并使用类似以下内容的方式向用户显示所有信息(使用引导程序):
But I'm getting this: 但是我得到这个:
I'm using the alternative syntax for control structures and works fine.
我正在为控制结构使用替代语法,并且工作正常。 But the CSS is not applied and I don't know why.
但是CSS没有应用,我也不知道为什么。 This is the relevant code:
这是相关代码:
<?php
$transactionId = $_REQUEST['transactionId'];
if ($_REQUEST['transactionState'] == 4 ):
$estadoTx = "Transacción aprobada";
?>
<div class="container-fluid">
<ul>
<li class="row">
<span class="itemName" id="quantity_first_product">Estado de la transaccion: </span>
<p class="description"><span id="state"></span></p>
</li>
<li class="row">
<span class="itemName" id="quantity_first_product">ID de la transaccion: </span>
<p class="description"><span id="transactionID" ></span></p>
</li>
</ul>
</div>
<script type="text/javascript">
var transaction_state;
var transactionState_span = document.getElementById("state");
transaction_state = <?php echo json_encode($estadoTx); ?>;
transactionState_span.innerHTML = transaction_state;
var transaction_id;
var transactionID_span = document.getElementById("transactionID");
transaction_id = <?php echo json_encode($transactionId); ?>;
transactionID_span.innerHTML = transaction_id;
</script>
<?php else:
$estadoTx=$_REQUEST['mensaje'];
?>
<h1>Determinar que sucede</h1>
<?php endif; ?>
The two CSS styles are: 两种CSS样式是:
.itemName{
color: #727578;
font-size :16px;
font-weight: bold;
float: left;
padding-left:25px;
margin-right: 25px;
}
.description{
color: #4ea6bc;
font-size :18px;
font-weight: bold;
float : left;
padding-left: 15px;
}
When the code is executed by the browser, the PHP code inside the javascript lines works fine: 当代码由浏览器执行时,javascript行内的PHP代码可以正常工作:
I'm doing my best but nothing works. 我正在尽力而为,但没有任何效果。 Sorry for the long post and thanks for any help!
抱歉,很长的帖子,感谢您的帮助!
The CSS is imported in the head section CSS被导入到头部
<link rel="stylesheet" type="text/css" href="assets/css/custom.css"/>
and sorry for the duplicated IDs, some ctrl-c ctrl-v issues. 并为重复的ID和某些ctrl-c ctrl-v问题感到抱歉。
I have no idea what you're doing. 我不知道你在做什么 The fact that I don't speak Spanish doesn't help either, but I'll try my best.
我不会说西班牙语的事实也无济于事,但我会尽力而为。
You left out the most important information: How do you import the CSS? 您忽略了最重要的信息:如何导入CSS?
Regardless ot that, the first thing to note is this: Do not use the same id twice. 无论是加时赛,首先要注意的事情是这样的: 不要使用相同的ID两次。
<span class="itemName" id="quantity_first_product">
should be <span class="itemName" id="somedifferentid">
. <span class="itemName" id="quantity_first_product">
应该是<span class="itemName" id="somedifferentid">
。
Next thing is, when I tried to run this, the CSS worked, but I got complete gibberish. 接下来的事情是,当我尝试运行此代码时,CSS起作用了,但是却变得毫无用处。 It looked like this:
它看起来像这样:
So I added a few rules to make it look better: 因此,我添加了一些规则以使其看起来更好:
li.row { clear: both; list-style-type: none; }
And that margin on the description doesn't look good at all, so I removed that too: 而且描述上的空白看起来一点也不好,所以我也删除了:
.description { [...] margin:0px; }
Now it looked like this: 现在看起来像这样:
So the CSS cleary works on my end. 所以CSS cleary对我有效。 Here's a working example:
这是一个工作示例:
Source of the get-data: 获取数据的来源:
<form method="get" action = "newEmptyPHP.php"> <input name = "transactionId" type="hidden" value="some-weird-id" > <input name = "transactionState" value="4"> <textarea name = "mensaje" rows="1" cols="50">Not everyone speaks spanish</textarea> <input type = "submit" value="Submit" > </form>
Your php file : 您的php文件 :
<?php $transactionId = $_REQUEST['transactionId']; if ($_REQUEST['transactionState'] == 4): $estadoTx = "Transacción aprobada"; ?> <style> li.row { clear: both; list-style-type: none; } .itemName{ color: #727578; font-size :16px; font-weight: bold; float: left; padding-left:25px; margin-right: 25px; } .description{ color: #4ea6bc; font-size :18px; font-weight: bold; float : left; padding-left: 15px; margin: 0px; } </style> <div class="container-fluid"> <ul> <li class="row"> <span class="itemName" id="quantity_first_product">Estado de la transaccion: </span> <p class="description"><span class="description" id="state">This description is in English, because I don't speak spanish.</span></p> </li> <li class="row"> <span class="itemName">ID de la transaccion: </span> <p class="description"><span class="description" id="transactionID" >This description is in English, because I don't speak spanish.</span></p> </li> </ul> </div> <script type="text/javascript"> var transaction_state; var transactionState_span = document.getElementById("state"); transaction_state = <?php echo json_encode($estadoTx); ?>; transactionState_span.innerHTML = transaction_state.toString(); var transaction_id; var transactionID_span = document.getElementById("transactionID"); transaction_id = <?php echo json_encode($transactionId); ?>; transactionID_span.innerHTML = transaction_id.toString(); </script> <?php else: $estadoTx = $_REQUEST['mensaje']; ?> <h1>Determinar que sucede</h1> Something's missing here, compadre. <?php endif; ?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.