Форум

dima85 · #1 (**permalink**) 04.04.2018, 23:42

В CSS есть такая строчка:

.email-address:before {
   content: "Email address: ";
}

зная ".email-address:before" можно как-то с помощью js получить значение content и вывести его например через alert, в данном случае, alert должен быть "Email address:"

рони · #2 (**permalink**) 05.04.2018, 00:43

dima85,

<style type="text/css">

.email-address:before {
  content: "Email address: ";
}

  </style>

  <script>
    var rules  =  document.styleSheets[0].cssRules[0];  // for  styleSheets   for  cssRules
   if(rules.selectorText == ".email-address::before") alert(rules.style["content"]);
  </script>

j0hnik · #3 (**permalink**) 05.04.2018, 00:55

рони, нужны проверки style может быть не один

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.email-address:before{
		content: "Email address: ";
	}
</style>
</head>
<body>
	<script> 
[].forEach.call(document.styleSheets, el=> {
	var a = [].find.call(el.rules, elt=>elt.selectorText == '.email-address::before');
	a && alert(a.style.getPropertyValue("content"));
});
</script>
</body>
</html>

рони · #4 (**permalink**) 05.04.2018, 01:30

Сообщение от j0hnik

рони, нужны проверки style может быть не один

???

j0hnik · #5 (**permalink**) 05.04.2018, 01:35

ваш код не сработает если выше будет подключен какой нибудь стиль

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<style type="text/css">

.email-address:before {
  content: "Email address: ";
}

  </style>

  <script>
    var rules  =  document.styleSheets[0].cssRules[0];  // for  styleSheets   for  cssRules
   if(rules.selectorText == ".email-address::before") alert(rules.style["content"]);
  </script>

рони · #6 (**permalink**) 05.04.2018, 01:41

Сообщение от j0hnik

ваш код не сработает если выше будет подключен какой нибудь стиль

сработает если его применить, как написано.

рони · #7 (**permalink**) 05.04.2018, 01:52

j0hnik,
...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<style type="text/css">

.email-address:before {
  content: "Email address: ";
}

  </style>

  <script>
  // for  styleSheets
   var style = document.styleSheets;
   for (var i=0; i<style.length; i++)  {
      //for  cssRules
        var rules  = style[i].cssRules;
      for (var j=0; j<rules.length; j++)  {
         if(rules[j].selectorText == ".email-address::before") {
             alert(rules[j].style["content"]);
             break;
         }

      }

   }
  </script>


</body>
</html>

j0hnik · #8 (**permalink**) 05.04.2018, 01:55

рони,
is good!

Форум

Справочник

Discord чат

Курсы javascript