为什么我的数组结果不符合我的 CSS 规则？答案

【问题标题】：Why does my array's result doesn't follow my CSS rules?为什么我的数组结果不符合我的 CSS 规则？
【发布时间】：2020-07-08 10:42:18
【问题描述】：

当用户键入单词时，我正在使用以下代码生成自定义链接。

该项目是用我在网上找到的大量代码编写的。除了两件事之外，一切都令人惊讶地“有效”：

生成的链接不遵循 CSS 规则
我找不到任何分离每个链接的方法

在我的编程之旅中，我有点陷入困境。 PS：如果需要，这里是 Fiddle https://jsfiddle.net/Adrienmlt/uspjLceg/4/

//SEARCH BOX INSPUT
$('#go').one('click', function(){
var id=$('#id').val();

//ARRAY LIST 1
  var linkList = {
        "http://google.com/": "Test1",
        "http://google.org/": "Test2",
        "http://google.net/": "Test3",
    };
    
//LINK GENERATION FROM ARRAY
      for (var link in linkList) {
        if (linkList.hasOwnProperty(link)) {
          var a = document.createElement('a');
              linkText = document.createTextNode(linkList[link]);
								a.href = link+id;
         					 a.appendChild(linkText) ;
        }
        
//CHECK BOX INPUT
if( $('input[name=Label2]').is(':checked') ){
				window.open(document.body.appendChild(a))
				} else {
				document.body.appendChild(a);
				}
      }

   //EVERY LINK OPENS IN A NEW WINDOW
   var links = document.links;
for (var i = 0; i < links.length; i++) {
     links[i].target = "_blank";
}
});

body {
	padding-left: 20px;
}
h1{
	font-size: 10px;
	font-family: "roboto";
	font-weight: 200;
}
h2{
	font-size: 20px;
	font-family: "roboto";
	font-weight: 200;
}
div {
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 5px;
  padding-left: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
  <head>
    <meta charset="utf-8">
    <title>Project 1</title>
    <script src="js/main.js"></script>
    <link type="text/css" rel="stylesheet" href="css/style.css">
  </head>
<body> 
<center> 

  <h1> 
   <div>
    <!--Chekboxes-->
                <input type="checkbox" id="Label2" name="Label2">
                <label for="Label2">Open every result in a new tab </label>
</div>
 <div>
<input type="text" value="" id="id"/>
<button type="button" id="go">GO</button> </div>
<div id="output"></div>
<div id="linkText"></div>
</h1>
</center>
  </body>
</html>

【问题讨论】：

您的代码应发布在此处。 Stack Overflow 的功能与 jsfiddle 提供的功能非常相似。您没有在此处发布 CSS，因此很难说问题出在哪里。
所以，您的代码中根本没有设置 a 标签的样式。
旁注； if (linkList.hasOwnProperty(link)) { linkList 中获取link。它怎么会不是财产？

标签： javascript jquery css arrays

【解决方案1】：

我认为你的 CSS 遵循规则.. 将以下代码添加到您的 css 中

//SEARCH BOX INSPUT
$('#go').one('click', function(){
var id=$('#id').val();

//ARRAY LIST 1
  var linkList = {
        "http://google.com/": "Test1",
        "http://google.org/": "Test2",
        "http://google.net/": "Test3",
    };
    
//LINK GENERATION FROM ARRAY
      for (var link in linkList) {
        if (linkList.hasOwnProperty(link)) {
          var a = document.createElement('a');
              linkText = document.createTextNode(linkList[link]);
								a.href = link+id;
         					 a.appendChild(linkText) ;
        }
        
//CHECK BOX INPUT
if( $('input[name=Label2]').is(':checked') ){
				window.open(document.body.appendChild(a))
				} else {
				document.body.appendChild(a);
				}
      }

   //EVERY LINK OPENS IN A NEW WINDOW
   var links = document.links;
for (var i = 0; i < links.length; i++) {
     links[i].target = "_blank";
}
});

body {
	padding-left: 20px;
}
h1{
	font-size: 10px;
	font-family: "roboto";
	font-weight: 200;
}
h2{
	font-size: 20px;
	font-family: "roboto";
	font-weight: 200;
}
div {
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 5px;
  padding-left: 8px;
}
a{
  display:block;
  color:red;
  text-decoration:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <meta charset="utf-8">
    <title>Project 1</title>
    <script src="js/main.js"></script>
    <link type="text/css" rel="stylesheet" href="css/style.css">
  </head>
<body> 
<center> 

  <h1> 
   <div>
    <!--Chekboxes-->
                <input type="checkbox" id="Label2" name="Label2">
                <label for="Label2">Open every result in a new tab </label>
</div>
 <div>
<input type="text" value="" id="id"/>
<button type="button" id="go">GO</button> </div>
<div id="output"></div>
<div id="linkText"></div>
</h1>
</center>
  </body>
</html>

【讨论】：