使用 CSS 在按钮上显示来自标题标签的 alt 标签的文本

问题描述

如何使用 CSS 或 JavaScript 在按钮上显示来自标题标签的 alt 标签的文本?像这样

How to display text from alt tag of from title tag on a button with CSS or with JavaScript?Something like this

document.getElementById("myBtn").value="MyNewValue";

但是我如何获得这个按钮的 ID?

But how do I get the ID's for this buttons?

按钮是社交登录按钮，您可以在这里看到它们:

The buttons are social login buttons and you can see them here:

虚拟表单框架登录

推荐答案

您必须添加一些 javascript 代码才能实现此目的.检查以下代码段:

You have to add some javascript code to achieve this. Check below Snippet:

$('.the_champ_login_ul li').each(function(index) {
  $('<span>' + $(this).find('i').attr('alt') + '</span>').insertAfter($(this).find('i ss'));
});

.theChampLogin {
  width: 100%;
  display: block;
}

.theChampFacebookBackground {
  background-color: #3C589A;
}

.theChampFacebookLoginSvg {
  background: url(//login.create.net/images/icons/user/facebook_30x30.png) left no-repeat;
}

.theChampTwitterLoginSvg {
  background: url(//login.create.net/images/icons/user/twitter-b_30x30.png) left no-repeat;
}

.theChampLoginSvg {
  height: 100%;
  width: 35px;
  display: inline-block;
}

.theChampLogin {
  padding: 0!important;
  margin: 2px;
  height: 35px;
  float: left;
  cursor: pointer;
  border: none;
}

ul.the_champ_login_ul li i span {
  font-style: normal;
  display: inline-block;
  color: #fff;
  line-height: normal;
  vertical-align: top;
  padding-top: 10px;
}

ul.the_champ_login_ul {
  list-style: none!important;
  padding-left: 0!important;
}

.theChampTwitterBackground {
  background-color: #55acee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="the_champ_login_ul">
  <li>
    <i class="theChampLogin theChampFacebookBackground theChampFacebookLogin" alt="Login with Facebook" title="Login with Facebook" style="display: block;"><ss class="theChampLoginSvg theChampFacebookLoginSvg"></ss></i></li>
  <li>
    <i class="theChampLogin theChampTwitterBackground theChampFacebookLogin" alt="Login with Twitter" title="Login with Twitter" style="display: block;"><ss class="theChampLoginSvg theChampTwitterLoginSvg"></ss></i></li>
</ul>

这篇关于使用 CSS 在按钮上显示来自标题标签的 alt 标签的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！